/*
 * Kikavu Theme - Waterway ERP look and feel.
 * Same palette as the login page (waterway-login.css) so the whole system reads as one product.
 * Colours are CSS variables: change them here once and everything follows.
 */
:root {
    --ww-navy: #04253f;
    --ww-navy-2: #072942;
    --ww-blue: #075878;
    --ww-blue-2: #087da1;
    --ww-aqua: #0a9faf;
    --ww-aqua-soft: #dff3f6;
    --ww-cyan: #0dafd8;          /* the logo colour */
    --ww-sand: #f5b940;
    --ww-ink: #15344b;
    --ww-muted: #5b7384;
    --ww-line: #dfe9ee;
    --ww-bg: #eef4f7;
    --ww-side: #f7fbfd;
}

/* ---------- page ---------- */
body.admin,
body.admin #wrapper { background: var(--ww-bg) !important; }
body.admin { color: var(--ww-ink); }
body.admin a { color: var(--ww-blue-2); }
body.admin a:hover, body.admin a:focus { color: var(--ww-blue); }

/* ---------- header: dark water gradient so the cyan logo stands out ---------- */
body.admin #header {
    background: linear-gradient(105deg, var(--ww-navy) 0%, var(--ww-blue) 60%, #067e96 100%) !important;
    box-shadow: 0 2px 10px rgba(4, 37, 63, .28) !important;
    border-bottom: 2px solid var(--ww-cyan);
}
body.admin #header #logo { padding-left: 14px; height: 57px; display: flex; align-items: center; }
body.admin #header #logo a.logo { margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
body.admin #header #logo img { height: 42px !important; width: auto !important; max-width: none; }
body.admin #header #logo a.logo-text { color: #fff !important; }
body.admin #header .hide-menu { color: #fff !important; }
body.admin #header .hide-menu:hover { background: rgba(255, 255, 255, .12) !important; }
body.admin #header .navbar-nav > li > a,
body.admin #header .navbar-nav > li > a i,
body.admin #header .navbar-nav .icon a { color: #fff !important; opacity: .92; }
body.admin #header .navbar-nav > li > a:hover { opacity: 1; background: rgba(255, 255, 255, .12) !important; }
body.admin #header #top_search input#search_input {
    background: rgba(255, 255, 255, .13) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
}
body.admin #header #top_search input#search_input:focus { background: rgba(255, 255, 255, .22) !important; border-color: var(--ww-cyan) !important; }
body.admin #header #top_search input#search_input::placeholder { color: rgba(255, 255, 255, .72) !important; }
body.admin #header #top_search #top_search_button button { color: rgba(255, 255, 255, .8) !important; }
body.admin #header .quick-create-icon,
body.admin #header .icon a[data-toggle="dropdown"] { color: #fff !important; }

/* ---------- sidebar ---------- */
body.admin .sidebar {
    background: var(--ww-side) !important;
    border-right: 1px solid var(--ww-line) !important;
}
body.admin #side-menu > li > a {
    color: #2f4b5f !important;
    border-radius: 9px;
    margin: 2px 0;
    font-weight: 500;
    transition: background .15s, color .15s;
}
body.admin #side-menu > li > a .menu-icon { color: var(--ww-aqua) !important; }
body.admin #side-menu > li > a:hover,
body.admin #side-menu > li > a:focus { background: var(--ww-aqua-soft) !important; color: var(--ww-blue) !important; }
body.admin #side-menu > li.active > a,
body.admin #side-menu > li.active-menu > a {
    background: linear-gradient(105deg, rgba(10, 159, 175, .17), rgba(10, 159, 175, .06)) !important;
    color: var(--ww-blue) !important;
    box-shadow: inset 3px 0 0 var(--ww-aqua);
    font-weight: 600;
}
body.admin #side-menu .nav-second-level { background: transparent !important; }
body.admin #side-menu .nav-second-level li a { color: #4a6579 !important; border-radius: 7px; }
body.admin #side-menu .nav-second-level li a:hover { color: var(--ww-blue) !important; background: var(--ww-aqua-soft) !important; }
body.admin #side-menu .nav-second-level li.active > a { color: var(--ww-blue) !important; font-weight: 600; background: rgba(10, 159, 175, .12) !important; }
body.admin .sidebar-user-profile .profile { border-color: var(--ww-line) !important; border-radius: 11px !important; box-shadow: 0 1px 2px rgba(4, 37, 63, .06); }

/* ---------- panels, tables, tabs ---------- */
body.admin .panel_s, body.admin .panel-default {
    border: 1px solid var(--ww-line) !important;
    border-radius: 13px !important;
    box-shadow: 0 1px 3px rgba(4, 37, 63, .06), 0 4px 14px rgba(4, 37, 63, .04) !important;
    background: #fff;
}
body.admin .panel_s > .panel-body { border-radius: 13px; }
body.admin h4.no-margin, body.admin .content h4 { color: var(--ww-navy-2); font-weight: 700; letter-spacing: -.01em; }
body.admin table.table > thead > tr > th {
    background: #f1f8fa; color: #375467; border-bottom: 2px solid var(--ww-line) !important;
    font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
}
body.admin table.table > tbody > tr:hover > td { background: #f5fbfc; }
body.admin .nav-tabs > li.active > a,
body.admin .nav-tabs > li.active > a:hover,
body.admin .nav-tabs > li.active > a:focus { color: var(--ww-blue) !important; border-bottom: 2px solid var(--ww-aqua) !important; font-weight: 600; }
body.admin .nav-tabs > li > a:hover { color: var(--ww-blue); background: var(--ww-aqua-soft); }

/* ---------- buttons and form focus ---------- */
body.admin .btn-primary, body.admin .btn-info {
    background: linear-gradient(105deg, #066f8d, #0a9eac) !important;
    border: 0 !important; color: #fff !important; border-radius: 8px;
    box-shadow: 0 6px 14px rgba(6, 125, 145, .22);
}
body.admin .btn-primary:hover, body.admin .btn-primary:focus,
body.admin .btn-info:hover, body.admin .btn-info:focus {
    background: linear-gradient(105deg, #055f7a, #078c99) !important; transform: translateY(-1px);
}
body.admin .btn-default { border-radius: 8px; border-color: var(--ww-line); color: var(--ww-ink); }
body.admin .btn-default:hover { background: var(--ww-aqua-soft); border-color: var(--ww-aqua); color: var(--ww-blue); }
body.admin .form-control:focus { border-color: var(--ww-aqua) !important; box-shadow: 0 0 0 3px rgba(10, 159, 175, .14) !important; }
body.admin .label-primary, body.admin .bg-info { background-color: var(--ww-aqua) !important; }
body.admin .dt-buttons .btn, body.admin .table-btn { border-radius: 7px; }
body.admin .dataTables_wrapper .pagination > .active > a { background: var(--ww-aqua) !important; border-color: var(--ww-aqua) !important; }

/* ---------- dashboard widgets ---------- */
body.admin .widget .panel-body, body.admin .home-summary .panel-body { border-radius: 13px; }

/* ---------- small screens ---------- */
@media (max-width: 991px) {
    body.admin #header #logo img { height: 34px !important; }
}

/* ---------- customer portal (light header: it uses the navy-lettering logo) ---------- */
body.customers a { color: var(--ww-blue-2); }
body.customers .navbar-default { border-bottom: 2px solid var(--ww-cyan) !important; }
body.customers .navbar-brand img, body.customers .logo img { max-height: 46px; height: auto; }
body.customers .btn-primary { background: linear-gradient(105deg, #066f8d, #0a9eac) !important; border: 0 !important; border-radius: 8px; }
body.customers .panel_s { border: 1px solid var(--ww-line); border-radius: 13px; box-shadow: 0 1px 3px rgba(4, 37, 63, .06); }