/* ============================================================
   WISDOM EYE — Green & White 3D Theme
   Replaces all blue tones with a rich 3D green palette
   ============================================================ */

/* ── Color palette ──────────────────────────────────────────
   Primary green  : #1a7a3c  (deep forest green)
   Mid green      : #22a050  (button / active)
   Light green    : #2ecc71  (hover / accent)
   Dark green     : #145c2d  (border / pressed)
   3D shadow green: #0f4422  (deep shadow)
   Page background: #ffffff  (white)
   Sidebar bg     : #f4faf6  (very light green-white)
   ──────────────────────────────────────────────────────────*/

/* ── Page & body ─────────────────────────────────────────── */
body {
    background-color: #ffffff !important;
    color: #1a2e1a !important;
}

/* ── Top navbar ──────────────────────────────────────────── */
.navbar-inverse {
    background: linear-gradient(180deg, #1e8c42 0%, #145c2d 100%) !important;
    border-color: #0f4422 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* Allow logo + text to fit without wrapping */
.navbar-brand {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    max-width: 280px !important;
}

.navbar-brand img {
    flex-shrink: 0 !important;
}

.navbar-brand span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
    color: #e8f8ee !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.12) !important;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #e8f8ee !important;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: rgba(255,255,255,0.15) !important;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg, #f4faf6 0%, #e8f5ed 100%) !important;
    border-right: 1px solid #b8dfc6 !important;
    box-shadow: 2px 0 6px rgba(26,122,60,0.08) !important;
}

.nav-sidebar > li > a {
    color: #1a4a2a !important;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.nav-sidebar > li > a:hover {
    background: linear-gradient(90deg, #d4f0e0 0%, #eaf7f0 100%) !important;
    color: #145c2d !important;
    border-left: 3px solid #22a050 !important;
    box-shadow: inset 0 1px 3px rgba(26,122,60,0.15) !important;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    background: linear-gradient(90deg, #1a7a3c 0%, #22a050 100%) !important;
    color: #ffffff !important;
    border-left: 3px solid #0f4422 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ── Primary buttons ─────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(180deg, #22a050 0%, #1a7a3c 100%) !important;
    border-color: #145c2d !important;
    color: #ffffff !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, #2ecc71 0%, #22a050 100%) !important;
    border-color: #1a7a3c !important;
    box-shadow: 0 4px 10px rgba(26,122,60,0.4), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
}

.btn-primary:active,
.btn-primary.active {
    background: linear-gradient(180deg, #145c2d 0%, #0f4422 100%) !important;
    border-color: #0f4422 !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.3) !important;
}

/* ── Success buttons ─────────────────────────────────────── */
.btn-success {
    background: linear-gradient(180deg, #27ae60 0%, #1e8c4a 100%) !important;
    border-color: #196b38 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.btn-success:hover {
    background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%) !important;
}

/* ── Labels & badges ─────────────────────────────────────── */
.label-primary,
.badge-primary {
    background: linear-gradient(135deg, #22a050, #1a7a3c) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.label-success {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: #ffffff !important;
}

/* ── Panel headings ──────────────────────────────────────── */
.panel-primary > .panel-heading {
    background: linear-gradient(135deg, #1a7a3c 0%, #145c2d 100%) !important;
    border-color: #0f4422 !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.15) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.panel-primary {
    border-color: #1a7a3c !important;
    box-shadow: 0 2px 8px rgba(26,122,60,0.15) !important;
}

/* ── Nav pills / tabs active ─────────────────────────────── */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background: linear-gradient(135deg, #22a050, #1a7a3c) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(26,122,60,0.35) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #1a7a3c !important;
    border-top: 2px solid #22a050 !important;
}

/* ── Links ───────────────────────────────────────────────── */
a {
    color: #1a7a3c !important;
}

a:hover,
a:focus {
    color: #22a050 !important;
}

/* ── Form focus ──────────────────────────────────────────── */
.form-control:focus {
    border-color: #22a050 !important;
    box-shadow: 0 0 0 3px rgba(34,160,80,0.2) !important;
    outline: none !important;
}

/* ── Progress bars ───────────────────────────────────────── */
.progress-bar {
    background: linear-gradient(90deg, #22a050, #1a7a3c) !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}

/* ── Pagination active ───────────────────────────────────── */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: #1a7a3c !important;
    border-color: #1a7a3c !important;
    color: #ffffff !important;
}

.pagination > li > a:hover {
    background-color: #d4f0e0 !important;
    border-color: #22a050 !important;
    color: #1a7a3c !important;
}

/* ── Dropdown active ─────────────────────────────────────── */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: linear-gradient(135deg, #22a050, #1a7a3c) !important;
    color: #ffffff !important;
}

/* ── List group active ───────────────────────────────────── */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: linear-gradient(135deg, #22a050, #1a7a3c) !important;
    border-color: #1a7a3c !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(26,122,60,0.3) !important;
}

/* ── Nav-badge (Admin label) ─────────────────────────────── */
.nav-badge {
    background: linear-gradient(135deg, #22a050, #145c2d) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
}

/* ── Sidebar active hover ────────────────────────────────── */
.nav-sidebar > li.active > a:focus,
.nav-sidebar > li.active > a:hover {
    background: linear-gradient(90deg, #145c2d 0%, #1a7a3c 100%) !important;
    color: #ffffff !important;
}

/* ── Page header underline ───────────────────────────────── */
.page-header {
    border-bottom: 2px solid #22a050 !important;
}

/* ── Table sort icon color ───────────────────────────────── */
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: #22a050 !important;
}

/* ── Chartist donut / timeline sent color ────────────────── */
.ct-series-a .ct-slice-donut,
.ct-slice-donut.ct-slice-donut-sent {
    stroke: #22a050 !important;
}

.ct-legend-sent {
    background-color: #22a050 !important;
}

.color-sent {
    color: #22a050 !important;
}

/* ── Input group addon focus ─────────────────────────────── */
.form-group.focus .input-group-addon,
.input-group.focus .input-group-addon {
    background-color: #22a050 !important;
    border-color: #22a050 !important;
}

/* ── Checkbox / radio checked ────────────────────────────── */
.checkbox.checked,
.radio.checked {
    color: #22a050 !important;
}

.checkbox.checked .second-icon,
.radio.checked .second-icon {
    color: #22a050 !important;
}

/* ── Switch on ───────────────────────────────────────────── */
.has-switch > div.switch-on label {
    background-color: #22a050 !important;
}

/* ── Tagsinput ───────────────────────────────────────────── */
.tagsinput {
    border-color: #22a050 !important;
}

.tagsinput .tag {
    background-color: #22a050 !important;
}

/* ── Typeahead cursor ────────────────────────────────────── */
.tt-suggestion.tt-cursor {
    background-color: #1a7a3c !important;
}

/* ── Alert info (uses blue by default) ───────────────────── */
.alert-info {
    background-color: #e8f8ee !important;
    border-color: #b8dfc6 !important;
    color: #145c2d !important;
}

/* ── Scrollbar accent (webkit) ───────────────────────────── */
::-webkit-scrollbar-thumb {
    background: #22a050 !important;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: #f4faf6 !important;
}