/*
 * Color theme overrides layered on top of custom-dark.css (the default theme).
 * Selected via the theme dropdown in the top navigation; applied through a
 * body class (theme-dark / theme-vivid). No class => default look is untouched.
 */

/* =========================================================================
 * DARK THEME
 * ========================================================================= */
body.theme-dark {
    background: #10161d;
    color: #9aa7b4;
}

/* Main content surface */
body.theme-dark .container.body .right_col {
    background: #16202a;
}

/* Top navigation bar */
body.theme-dark .nav_menu {
    background: #1b2734;
    border-bottom: 1px solid #10161d;
}
body.theme-dark .top_nav .nav>li>a {
    color: #9aa7b4;
}
body.theme-dark .top_nav .nav>li>a:hover,
body.theme-dark .top_nav .nav>li>a:focus,
body.theme-dark .top_nav .nav .open>a {
    background: #16202a;
    color: #e4e9ee;
}

/* Panels / cards */
body.theme-dark .x_panel {
    background: #1f2b36;
    border: 1px solid #2c3a47;
}
body.theme-dark .x_title {
    border-bottom: 2px solid #2c3a47;
}
body.theme-dark .x_title h2,
body.theme-dark .x_title h2 small,
body.theme-dark .x_title span,
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark h4, body.theme-dark h5,
body.theme-dark .page-title .title_left h3 {
    color: #dbe2e9;
}

/* Tables */
body.theme-dark table,
body.theme-dark .table {
    color: #c3ccd6;
}
body.theme-dark .table>thead>tr>th,
body.theme-dark .table>tbody>tr>th,
body.theme-dark .table>tfoot>tr>th,
body.theme-dark .table>thead>tr>td,
body.theme-dark .table>tbody>tr>td,
body.theme-dark .table>tfoot>tr>td {
    border-top: 1px solid #2c3a47;
}
body.theme-dark .table>thead>tr>th {
    border-bottom: 2px solid #2c3a47;
}
body.theme-dark .table-striped>tbody>tr:nth-of-type(odd) {
    background: #23303c;
}
body.theme-dark .table-hover>tbody>tr:hover {
    background: #2b3a48;
}
body.theme-dark .table-bordered,
body.theme-dark .table-bordered>tbody>tr>td,
body.theme-dark .table-bordered>tbody>tr>th,
body.theme-dark .table-bordered>thead>tr>td,
body.theme-dark .table-bordered>thead>tr>th {
    border: 1px solid #2c3a47;
}

/* Form controls */
body.theme-dark .form-control,
body.theme-dark input[type="text"],
body.theme-dark input[type="number"],
body.theme-dark input[type="password"],
body.theme-dark input[type="email"],
body.theme-dark input[type="search"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="url"],
body.theme-dark input[type="date"],
body.theme-dark input:not([type]),
body.theme-dark select,
body.theme-dark textarea {
    background: #16202a;
    border: 1px solid #2c3a47;
    color: #dbe2e9;
}
body.theme-dark .form-control[disabled],
body.theme-dark .form-control[readonly],
body.theme-dark input[disabled],
body.theme-dark input[readonly],
body.theme-dark select[disabled],
body.theme-dark textarea[disabled] {
    background: #1b2734;
    color: #9aa7b4;
}
body.theme-dark input::-webkit-input-placeholder,
body.theme-dark textarea::-webkit-input-placeholder {
    color: #6f7d8b;
}

/* Tile / count widgets */
body.theme-dark .tile_count {
    border-color: #2c3a47;
}
body.theme-dark .tile_count .tile_stats_count {
    border-bottom: 1px solid #2c3a47;
}
body.theme-dark .tile_count .tile_stats_count .count {
    color: #dbe2e9;
}

/* Dropdown menus that open with a light background */
body.theme-dark .navbar-nav .open .dropdown-menu,
body.theme-dark .dropdown-menu {
    background: #1f2b36;
    border: 1px solid #2c3a47;
}
body.theme-dark .dropdown-menu>li>a {
    color: #c3ccd6;
}
body.theme-dark .dropdown-menu>li>a:hover,
body.theme-dark .dropdown-menu>li>a:focus {
    background: #2b3a48;
    color: #fff;
}

/* Panels borders used elsewhere */
body.theme-dark .well,
body.theme-dark .panel {
    background: #1f2b36;
    border-color: #2c3a47;
}

/* =========================================================================
 * VIVID THEME
 * ========================================================================= */
body.theme-vivid {
    background: #4a1fb8;
}

/* Sidebar + brand area: vivid gradient */
body.theme-vivid .left_col,
body.theme-vivid .nav_title {
    background: #6a11cb;
    background: linear-gradient(180deg, #6a11cb 0%, #2575fc 100%);
}
body.theme-vivid .nav.side-menu>li.active>a,
body.theme-vivid .nav.side-menu>li.current-page>a {
    text-shadow: none;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}
body.theme-vivid .nav.child_menu li.active a,
body.theme-vivid .nav.child_menu li a:hover {
    color: #ffe9a8;
}

/* Main content surface */
body.theme-vivid .container.body .right_col {
    background: #f2f3fb;
}

/* Top navigation bar */
body.theme-vivid .nav_menu {
    background: #ffffff;
    border-bottom: 3px solid #6a11cb;
}
body.theme-vivid .top_nav .nav>li>a:hover,
body.theme-vivid .top_nav .nav>li>a:focus,
body.theme-vivid .top_nav .nav .open>a {
    color: #6a11cb;
}

/* Panels / cards: vivid accented title */
body.theme-vivid .x_panel {
    border: 1px solid #e2ddf5;
    box-shadow: 0 1px 4px rgba(106, 17, 203, 0.08);
}
body.theme-vivid .x_title {
    border-bottom: 2px solid #6a11cb;
}
body.theme-vivid .x_title h2,
body.theme-vivid .page-title .title_left h3 {
    color: #6a11cb;
}

/* Tables: vivid header accent */
body.theme-vivid .table>thead>tr>th {
    border-bottom: 2px solid #6a11cb;
    color: #4a1fb8;
}
body.theme-vivid .table-striped>tbody>tr:nth-of-type(odd) {
    background: #f4f1fd;
}

/* Tile / count widgets */
body.theme-vivid .tile_count .tile_stats_count .count {
    color: #6a11cb;
}

/* =========================================================================
 * GREY THEME (dark neutral monochrome)
 * ========================================================================= */
body.theme-grey {
    background: #2b2d30;
    color: #a7abb0;
}

/* Sidebar + brand area */
body.theme-grey .left_col,
body.theme-grey .nav_title {
    background: #35383c;
}

/* Main content surface */
body.theme-grey .container.body .right_col {
    background: #3a3d40;
}

/* Top navigation bar */
body.theme-grey .nav_menu {
    background: #35383c;
    border-bottom: 1px solid #2b2d30;
}
body.theme-grey .top_nav .nav>li>a {
    color: #a7abb0;
}
body.theme-grey .top_nav .nav>li>a:hover,
body.theme-grey .top_nav .nav>li>a:focus,
body.theme-grey .top_nav .nav .open>a {
    background: #3a3d40;
    color: #e5e7ea;
}

/* Panels / cards */
body.theme-grey .x_panel {
    background: #45484c;
    border: 1px solid #55585d;
}
body.theme-grey .x_title {
    border-bottom: 2px solid #55585d;
}
body.theme-grey .x_title h2,
body.theme-grey .x_title h2 small,
body.theme-grey .x_title span,
body.theme-grey h1, body.theme-grey h2, body.theme-grey h3,
body.theme-grey h4, body.theme-grey h5,
body.theme-grey .page-title .title_left h3 {
    color: #e0e2e5;
}

/* Tables */
body.theme-grey table,
body.theme-grey .table {
    color: #cbced2;
}
body.theme-grey .table>thead>tr>th,
body.theme-grey .table>tbody>tr>th,
body.theme-grey .table>tfoot>tr>th,
body.theme-grey .table>thead>tr>td,
body.theme-grey .table>tbody>tr>td,
body.theme-grey .table>tfoot>tr>td {
    border-top: 1px solid #55585d;
}
body.theme-grey .table>thead>tr>th {
    border-bottom: 2px solid #55585d;
}
body.theme-grey .table-striped>tbody>tr:nth-of-type(odd) {
    background: #4b4e52;
}
body.theme-grey .table-hover>tbody>tr:hover {
    background: #53565b;
}
body.theme-grey .table-bordered,
body.theme-grey .table-bordered>tbody>tr>td,
body.theme-grey .table-bordered>tbody>tr>th,
body.theme-grey .table-bordered>thead>tr>td,
body.theme-grey .table-bordered>thead>tr>th {
    border: 1px solid #55585d;
}

/* Form controls */
body.theme-grey .form-control,
body.theme-grey input[type="text"],
body.theme-grey input[type="number"],
body.theme-grey input[type="password"],
body.theme-grey input[type="email"],
body.theme-grey input[type="search"],
body.theme-grey input[type="tel"],
body.theme-grey input[type="url"],
body.theme-grey input[type="date"],
body.theme-grey input:not([type]),
body.theme-grey select,
body.theme-grey textarea {
    background: #3a3d40;
    border: 1px solid #55585d;
    color: #e0e2e5;
}
body.theme-grey .form-control[disabled],
body.theme-grey .form-control[readonly],
body.theme-grey input[disabled],
body.theme-grey input[readonly],
body.theme-grey select[disabled],
body.theme-grey textarea[disabled] {
    background: #35383c;
    color: #a7abb0;
}
body.theme-grey input::-webkit-input-placeholder,
body.theme-grey textarea::-webkit-input-placeholder {
    color: #7f838a;
}

/* Dropdown menus that open with a light background */
body.theme-grey .navbar-nav .open .dropdown-menu,
body.theme-grey .dropdown-menu {
    background: #45484c;
    border: 1px solid #55585d;
}
body.theme-grey .dropdown-menu>li>a {
    color: #cbced2;
}
body.theme-grey .dropdown-menu>li>a:hover,
body.theme-grey .dropdown-menu>li>a:focus {
    background: #53565b;
    color: #fff;
}

/* Tile / count widgets */
body.theme-grey .tile_count {
    border-color: #55585d;
}
body.theme-grey .tile_count .tile_stats_count {
    border-bottom: 1px solid #55585d;
}
body.theme-grey .tile_count .tile_stats_count .count {
    color: #e0e2e5;
}

/* Panels / wells */
body.theme-grey .well,
body.theme-grey .panel {
    background: #45484c;
    border-color: #55585d;
}

/* =========================================================================
 * TAGS INPUT (jquery.tagsinput)
 * The widget box is hardcoded white with black text in the plugin CSS, so on
 * the dark content themes (dark / grey) it stays white. Re-theme it to match
 * .form-control. The vivid theme keeps a light content area, so it's left as-is.
 * ========================================================================= */
body.theme-dark div.tagsinput {
    background: #16202a;
    border: 1px solid #2c3a47;
}
body.theme-dark div.tagsinput input {
    color: #dbe2e9;
}

body.theme-grey div.tagsinput {
    background: #3a3d40;
    border: 1px solid #55585d;
}
body.theme-grey div.tagsinput input {
    color: #e0e2e5;
}

/* =========================================================================
 * BASIC / CANCEL BUTTONS (.btn-basic, .btn-secondary)
 * Neither class has any CSS of its own in this Bootstrap 3 theme, so the
 * button renders as a native control that ignores the author text color and
 * ends up light-on-light / unreadable. Give them an explicit light background
 * so the dark text takes effect on the dark themes.
 * ========================================================================= */
body.theme-dark .btn-basic,
body.theme-grey .btn-basic,
body.theme-dark .btn-secondary,
body.theme-grey .btn-secondary {
    background-color: #e6e6e6;
    border: 1px solid #adadad;
    color: #333;
}

/* =========================================================================
 * DEFAULT BUTTONS (.btn-default) — e.g. DataTables Copy / CSV / Print
 * Bootstrap renders these solid white, which glares on the dark content
 * themes. Darken the background to sit in the theme and lighten the text.
 * ========================================================================= */
body.theme-dark .btn-default {
    background-color: #2b3a48;
    border: 1px solid #3a4a5a;
    color: #dbe2e9;
}
body.theme-dark .btn-default:hover,
body.theme-dark .btn-default:focus,
body.theme-dark .btn-default:active,
body.theme-dark .btn-default.active {
    background-color: #34465a;
    border-color: #46586b;
    color: #fff;
}

body.theme-grey .btn-default {
    background-color: #53565b;
    border: 1px solid #676a70;
    color: #e0e2e5;
}
body.theme-grey .btn-default:hover,
body.theme-grey .btn-default:focus,
body.theme-grey .btn-default:active,
body.theme-grey .btn-default.active {
    background-color: #5f6268;
    border-color: #767a80;
    color: #fff;
}

/* =========================================================================
 * PAGINATION — DataTables prev/next (上一頁 / 下一頁) & page numbers.
 * custom.css forces `.dataTables_paginate a { background:#ddd !important }`,
 * so these overrides must also use !important and target the same selector to
 * darken the links to match the .btn-default (Print) button. Covers both the
 * legacy DataTables markup (.dataTables_paginate a) and Bootstrap pagination.
 * ========================================================================= */
body.theme-dark .dataTables_paginate a,
body.theme-dark .pagination>li>a,
body.theme-dark .pagination>li>span {
    background-color: #2b3a48 !important;
    border-color: #3a4a5a !important;
    color: #dbe2e9 !important;
}
body.theme-dark .dataTables_paginate a:hover,
body.theme-dark .dataTables_paginate a:focus,
body.theme-dark .dataTables_paginate a.current,
body.theme-dark .dataTables_paginate a.paginate_active,
body.theme-dark .pagination>li>a:hover,
body.theme-dark .pagination>li>a:focus,
body.theme-dark .pagination>.active>a,
body.theme-dark .pagination>.active>span {
    background-color: #34465a !important;
    border-color: #46586b !important;
    color: #fff !important;
}
body.theme-dark .dataTables_paginate a.disabled,
body.theme-dark .dataTables_paginate .disabled a,
body.theme-dark .pagination>.disabled>a,
body.theme-dark .pagination>.disabled>span {
    color: #6f7d8b !important;
}

body.theme-grey .dataTables_paginate a,
body.theme-grey .pagination>li>a,
body.theme-grey .pagination>li>span {
    background-color: #53565b !important;
    border-color: #676a70 !important;
    color: #e0e2e5 !important;
}
body.theme-grey .dataTables_paginate a:hover,
body.theme-grey .dataTables_paginate a:focus,
body.theme-grey .dataTables_paginate a.current,
body.theme-grey .dataTables_paginate a.paginate_active,
body.theme-grey .pagination>li>a:hover,
body.theme-grey .pagination>li>a:focus,
body.theme-grey .pagination>.active>a,
body.theme-grey .pagination>.active>span {
    background-color: #5f6268 !important;
    border-color: #767a80 !important;
    color: #fff !important;
}
body.theme-grey .dataTables_paginate a.disabled,
body.theme-grey .dataTables_paginate .disabled a,
body.theme-grey .pagination>.disabled>a,
body.theme-grey .pagination>.disabled>span {
    color: #7f838a !important;
}

/* =========================================================================
 * FOOTER (雲樁科技 Wincharge Technology Inc.)
 * Defaults to white (footer { background:#fff }); match the header (.nav_menu)
 * background on the dark themes so it doesn't glare.
 * ========================================================================= */
body.theme-dark footer {
    background: #1b2734;
    border-top: 1px solid #10161d;
}
body.theme-dark footer,
body.theme-dark footer a {
    color: #9aa7b4;
}

body.theme-grey footer {
    background: #35383c;
    border-top: 1px solid #2b2d30;
}
body.theme-grey footer,
body.theme-grey footer a {
    color: #a7abb0;
}

/* =========================================================================
 * DATE RANGE SELECTOR (#reportrange)
 * The box carries an inline `background:#fff; border:1px solid #ccc` style, so
 * the override needs !important. Match the themed form inputs.
 * ========================================================================= */
body.theme-dark [id^="reportrange"] {
    background: #16202a !important;
    border: 1px solid #2c3a47 !important;
    color: #dbe2e9;
}
body.theme-grey [id^="reportrange"] {
    background: #3a3d40 !important;
    border: 1px solid #55585d !important;
    color: #e0e2e5;
}

/* -------------------------------------------------------------------------
 * ...and the popup calendar (.daterangepicker), which is white by default.
 * The selected day keeps its blue accent.
 * ------------------------------------------------------------------------- */
body.theme-dark .daterangepicker {
    background: #1f2b36;
    border: 1px solid #2c3a47;
    color: #dbe2e9;
}
body.theme-dark .daterangepicker:after {
    border-bottom-color: #1f2b36;
}
body.theme-dark .daterangepicker.dropup:after {
    border-top-color: #1f2b36;
}
body.theme-dark .daterangepicker .calendar-table {
    background: #1f2b36;
    border-color: #1f2b36;
}
body.theme-dark .daterangepicker td.available:hover,
body.theme-dark .daterangepicker th.available:hover {
    background-color: #2b3a48;
    color: #fff;
}
body.theme-dark .daterangepicker td.off,
body.theme-dark .daterangepicker td.off.in-range,
body.theme-dark .daterangepicker td.off.start-date,
body.theme-dark .daterangepicker td.off.end-date {
    background-color: #1f2b36;
    color: #6f7d8b;
}
body.theme-dark .daterangepicker td.in-range {
    background-color: #24303c;
    color: #dbe2e9;
}
body.theme-dark .daterangepicker td.disabled {
    color: #6f7d8b;
}
body.theme-dark .daterangepicker .input-mini {
    background: #16202a;
    border: 1px solid #2c3a47;
    color: #dbe2e9;
}
body.theme-dark .daterangepicker .ranges li {
    background: #2b3a48;
    border-color: #2b3a48;
    color: #cfe0f0;
}

body.theme-grey .daterangepicker {
    background: #45484c;
    border: 1px solid #55585d;
    color: #e0e2e5;
}
body.theme-grey .daterangepicker:after {
    border-bottom-color: #45484c;
}
body.theme-grey .daterangepicker.dropup:after {
    border-top-color: #45484c;
}
body.theme-grey .daterangepicker .calendar-table {
    background: #45484c;
    border-color: #45484c;
}
body.theme-grey .daterangepicker td.available:hover,
body.theme-grey .daterangepicker th.available:hover {
    background-color: #53565b;
    color: #fff;
}
body.theme-grey .daterangepicker td.off,
body.theme-grey .daterangepicker td.off.in-range,
body.theme-grey .daterangepicker td.off.start-date,
body.theme-grey .daterangepicker td.off.end-date {
    background-color: #45484c;
    color: #7f838a;
}
body.theme-grey .daterangepicker td.in-range {
    background-color: #4f5358;
    color: #e0e2e5;
}
body.theme-grey .daterangepicker td.disabled {
    color: #7f838a;
}
body.theme-grey .daterangepicker .input-mini {
    background: #3a3d40;
    border: 1px solid #55585d;
    color: #e0e2e5;
}
body.theme-grey .daterangepicker .ranges li {
    background: #53565b;
    border-color: #53565b;
    color: #d6dae0;
}

/* =========================================================================
 * COMPANY LOGO AND NAME IN THE HEADER, next to the menu toggle (all themes)
 * ========================================================================= */
.nav_brand {
    float: left;
    line-height: 57px;
    white-space: nowrap;
}
.nav_brand img {
    max-height: 40px;
    max-width: 160px;
    vertical-align: middle;
}
/* the default logo is white on transparent, drawn for the dark menu */
.nav_brand_default img {
    background: #2A3F54;
    border-radius: 4px;
    padding: 2px 6px;
}
.nav_brand span {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px;
    font-size: 18px;
    color: #515356;
    vertical-align: middle;
}
/* the right-hand menu was fixed at 70% of the header, which left no room for the
   logo and name on a narrower window; let it be as wide as its entries */
.top_nav .navbar-right {
    width: auto;
}
body.theme-dark .nav_brand span {
    color: #9aa7b4;
}
body.theme-grey .nav_brand span {
    color: #a7abb0;
}
/* the menu no longer has the logo block above it */
#sidebar-menu {
    padding-top: 10px;
}
@media (max-width: 767px) {
    .nav_brand span {
        display: none;
    }
}