/*
 * ViMbAdmin sample skin: "dark"
 * ----------------------------------------------------------------------
 * A reference skin proving the skin-aware asset pipeline. It is loaded
 * AFTER the base Bootstrap-2 stylesheets (see header-css.phtml), so these
 * rules win without touching the originals.
 *
 * Enable:
 *   application.ini -> resources.smarty.skin = "dark"
 * This file is served from public/css/_skins/dark/skin.css automatically.
 * See contrib/THEMING.md for the full guide.
 */

:root {
    --vimb-bg:        #0b1220;
    --vimb-surface:   #131c2e;
    --vimb-surface-2: #1b2740;
    --vimb-border:    #243150;
    --vimb-text:      #e6edf6;
    --vimb-muted:     #9fb0c8;
    --vimb-accent:    #f59e0b;
    --vimb-accent-2:  #fbbf24;
    --vimb-danger:    #ef4444;
    --vimb-ok:        #22c55e;
}

/* ---- page ---------------------------------------------------------- */
body {
    background: var(--vimb-bg);
    color: var(--vimb-text);
}
a            { color: var(--vimb-accent); }
a:hover      { color: var(--vimb-accent-2); }
hr           { border-top-color: var(--vimb-border); }
.page-header { border-bottom-color: var(--vimb-border); }
.page-header h1, h1, h2, h3, h4, legend { color: var(--vimb-text); }

/* ---- top navbar --------------------------------------------------- */
.navbar-inverse .navbar-inner {
    background: var(--vimb-surface);
    border-color: var(--vimb-border);
    background-image: none;
    box-shadow: none;
}
.navbar-inverse .brand,
.navbar-inverse .nav > li > a { color: var(--vimb-text); }
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > .active > a,
.navbar-inverse .nav > .active > a:hover {
    background: var(--vimb-surface-2);
    color: var(--vimb-accent);
}
.navbar-inverse .brand { color: var(--vimb-accent); }

/* ---- panels / wells ---------------------------------------------- */
.well, .hero-unit {
    background: var(--vimb-surface);
    border-color: var(--vimb-border);
    box-shadow: none;
}

/* ---- tables ------------------------------------------------------- */
.table, .table th, .table td { color: var(--vimb-text); }
.table th { color: var(--vimb-text); border-bottom-color: var(--vimb-border); }
.table td, .table th { border-top-color: var(--vimb-border); }
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th { background: var(--vimb-surface); }
.table tbody tr:hover > td, .table tbody tr:hover > th { background: var(--vimb-surface-2); }
.table-bordered { border-color: var(--vimb-border); }

/* ---- forms -------------------------------------------------------- */
input, textarea, select, .uneditable-input {
    background: var(--vimb-surface-2);
    color: var(--vimb-text);
    border-color: var(--vimb-border);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--vimb-accent);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .25);
}
.control-label, label, .help-block, .muted { color: var(--vimb-muted); }
/* input-group addons: domain suffix (@example.com) + the [+] add button.
   Bootstrap 2 .add-on defaults to a light #eee gradient -> invisible on dark. */
.input-prepend .add-on,
.input-append .add-on {
    background: var(--vimb-surface);
    color: var(--vimb-text);
    border-color: var(--vimb-border);
    text-shadow: none;
}
.input-prepend .btn,
.input-append .btn {
    background: var(--vimb-surface-2);
    color: var(--vimb-text);
    border-color: var(--vimb-border);
}
.input-prepend .btn:hover,
.input-append .btn:hover { background: var(--vimb-border); }
.control-group.error input,
.control-group.error textarea { border-color: var(--vimb-danger); }
code, pre {
    background: var(--vimb-surface-2);
    color: var(--vimb-accent-2);
    border-color: var(--vimb-border);
}

/* ---- buttons ------------------------------------------------------ */
.btn {
    background: var(--vimb-surface-2);
    color: var(--vimb-text);
    border-color: var(--vimb-border);
    background-image: none;
    text-shadow: none;
}
.btn:hover { background: var(--vimb-border); color: var(--vimb-text); }
.btn-primary {
    background: var(--vimb-accent);
    border-color: var(--vimb-accent);
    color: #1a1300;
}
.btn-primary:hover { background: var(--vimb-accent-2); color: #1a1300; }
.btn-danger { background: var(--vimb-danger); border-color: var(--vimb-danger); color: #fff; }
.btn-success { background: var(--vimb-ok); border-color: var(--vimb-ok); color: #052e12; }
.btn-success:hover { background: var(--vimb-ok); color: #052e12; filter: brightness(1.1); }
/* keep colour even when the toggle is shown disabled (self row) */
.btn-success.disabled, .btn-danger.disabled { opacity: .8; }
/* Super-admin toggle: green when on, neutral/transparent when off (the
   shared toggle JS still tags it btn-danger to track state — we just don't
   paint it red). */
.super-toggle.btn-danger {
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border);
    color: var(--vimb-text);
}
.super-toggle.btn-danger:hover { background: var(--vimb-border); }

/* ---- alerts / messages ------------------------------------------- */
.alert {
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border);
    color: var(--vimb-text);
}
.alert-success { border-left: 3px solid var(--vimb-ok); }
.alert-error   { border-left: 3px solid var(--vimb-danger); }
.alert-info    { border-left: 3px solid var(--vimb-accent); }

/* ---- page containers (kill the light panels) ---------------------- */
html, body { background-color: var(--vimb-bg); }
.page-content {
    background-color: var(--vimb-surface);
    box-shadow: none;
    border: 1px solid var(--vimb-border);
}
.page-header {
    background-color: var(--vimb-surface-2);
    border-bottom-color: var(--vimb-border);
}
.page-header h1 { color: var(--vimb-text); }

/* ---- DataTables controls (Show entries / Search / info / paging) -- */
.dataTables_wrapper { color: var(--vimb-text); }
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_length label,
.dataTables_filter label { color: var(--vimb-muted); }
.dataTables_filter input,
.dataTables_length select {
    background: var(--vimb-surface-2);
    color: var(--vimb-text);
    border-color: var(--vimb-border);
}
.dataTables_paginate .paginate_button,
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    color: var(--vimb-text) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
    color: var(--vimb-accent) !important;
}

/* DataTables sort headers + bordered-table header row */
table.dataTable thead th,
table.dataTable thead td,
.table thead th {
    color: var(--vimb-text);
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border);
}

/* ---- glyphicon sprites (dark PNG -> invert so visible on dark) ----- */
/* Bootstrap 2 ships a dark sprite; invert renders it light. icon-white
   stays light (double-invert handled below). */
[class^="icon-"],
[class*=" icon-"] { filter: invert(1) brightness(1.6); }
.btn [class^="icon-"],
.btn [class*=" icon-"] { filter: invert(1) brightness(1.6); }
/* elements that already use the white sprite shouldn't be re-inverted */
.icon-white,
.btn-primary [class^="icon-"],
.btn-danger  [class^="icon-"],
.navbar-inverse [class^="icon-"] { filter: none; }

/* ---- form action bars (Bootstrap 2 .form-actions = #f5f5f5) -------- */
.form-actions {
    background-color: var(--vimb-surface);
    border-top-color: var(--vimb-border);
}

/* ---- plugin tabs (mailbox/domain add-edit) ------------------------ */
.nav-tabs { border-bottom-color: var(--vimb-border); }
.nav-tabs > li > a { color: var(--vimb-muted); }
.nav-tabs > li > a:hover {
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border) var(--vimb-border) var(--vimb-border);
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
    color: var(--vimb-text);
    background: var(--vimb-surface);
    border-color: var(--vimb-border) var(--vimb-border) transparent;
}
.tab-content { background: transparent; }

/* ---- dropdowns / typeahead autocomplete --------------------------- */
.dropdown-menu, .typeahead {
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.dropdown-menu > li > a { color: var(--vimb-text); }
.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a {
    background: var(--vimb-accent);
    color: #1a1300;
}
.dropdown-menu .divider { background: var(--vimb-border); border-bottom-color: var(--vimb-border); }

/* ---- popovers (the "?" help bubbles) + tooltips ------------------- */
.popover {
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border);
    color: var(--vimb-text);
}
.popover-title {
    background: var(--vimb-surface);
    border-bottom-color: var(--vimb-border);
    color: var(--vimb-text);
}
.popover.top .arrow:after    { border-top-color: var(--vimb-surface-2); }
.popover.bottom .arrow:after { border-bottom-color: var(--vimb-surface-2); }
.popover.left .arrow:after   { border-left-color: var(--vimb-surface-2); }
.popover.right .arrow:after  { border-right-color: var(--vimb-surface-2); }
.tooltip-inner { background: var(--vimb-surface-2); color: var(--vimb-text); }

/* ---- modals (if any are used outside colorbox) ------------------- */
.modal, .modal-body { background: var(--vimb-surface); color: var(--vimb-text); }
.modal-header, .modal-footer {
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border);
}

/* ---- pagination / pager ------------------------------------------ */
.pagination ul > li > a,
.pagination ul > li > span,
.pager li > a, .pager li > span {
    background: var(--vimb-surface-2);
    border-color: var(--vimb-border);
    color: var(--vimb-text);
}
.pagination ul > li > a:hover,
.pager li > a:hover { background: var(--vimb-border); }

/* ---- breadcrumb / hero-unit -------------------------------------- */
.breadcrumb, .hero-unit {
    background: var(--vimb-surface);
    color: var(--vimb-text);
}
.breadcrumb .divider { color: var(--vimb-muted); }

/* ---- footer ------------------------------------------------------- */
footer, .footer { color: var(--vimb-muted); border-top-color: var(--vimb-border); }