/*
    EGOJI theme - built from the school crest (images/egoji.png).

    Crest colours:  teal #008080 | orange #FF8040 | yellow (#FFFF00, softened) | black outline (ink) | white
    Roles:
      PRIMARY   teal    - shell (navbar), main actions, links, table headers, focus, active states
      SECONDARY orange  - Submit/Save, highlights, accent edges, footer accents, one dashboard tile
      TERTIARY  yellow  - small highlights: warnings, badges, active-menu marker, one dashboard tile
      INK       black   - text, footer, one dashboard tile (anchors the page)
      NEUTRALS          - ~60% of every screen (page background, white cards)

    Contrast rules (measured): text on teal or ink is WHITE (4.8:1 / 16:1); white on orange is only
    2.5:1, so text ON orange/yellow is INK (6.5:1 / 11:1); orange text on white uses the deeper
    --egoji-secondary-deep (5.2:1).

    Loaded after Bootstrap 3 / AdminLTE 2 so it wins without editing vendor CSS, page markup or JS.
*/

:root {
    --egoji-primary: #008080;
    --egoji-primary-dark: #006666;
    --egoji-primary-tint: #E6F4F3;
    --egoji-on-primary: #FFFFFF;

    --egoji-secondary: #FF8040;
    --egoji-secondary-dark: #F26B23;
    --egoji-secondary-deep: #C2410C;
    --egoji-secondary-tint: #FFF1E8;
    --egoji-on-secondary: #1B2226;

    --egoji-accent: #FFD23F;
    --egoji-accent-tint: #FFF8DB;

    --egoji-ink: #1B2226;
    --egoji-ink-soft: #2C373D;
    --egoji-muted: #66727A;
    --egoji-border: #DCE6E6;
    --egoji-bg: #F1F6F6;
    --egoji-danger: #D9483B;

    --egoji-radius: 8px;
    --egoji-shadow: 0 1px 2px rgba(20,30,40,.06), 0 4px 14px rgba(20,30,40,.06);
}

/* ==========================================================
   Base
   ========================================================== */
/* AdminLTE only painted a light page background through .layout-boxed; the full-width layout needs it set here. */
html, body, .wrapper {
    background-color: var(--egoji-bg) !important;
}

body {
    color: var(--egoji-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(0,128,128,.22);
}

h1, h2, h3, h4, h5, .box-title {
    font-weight: 600;
    color: var(--egoji-ink);
    letter-spacing: -.01em;
}

a {
    color: var(--egoji-primary);
    transition: color .15s ease;
}

    a:hover, a:focus {
        color: var(--egoji-secondary-deep);
    }

/* Brand-coloured native checkboxes / radios (used where iCheck is not loaded) */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--egoji-primary);
}

/* Utility colour classes AdminLTE ships in blue/green/yellow */
.text-blue, .text-light-blue, .text-aqua, .text-green {
    color: var(--egoji-primary) !important;
}

.text-yellow, .text-orange {
    color: var(--egoji-secondary-deep) !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c7d0d6;
    border-radius: 8px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a9b4bb;
    }

/* ==========================================================
   Shell: navbar (PRIMARY teal, white text) + crest stripe
   ========================================================== */
.main-header .navbar,
.skin-blue .main-header .navbar {
    background-color: var(--egoji-primary) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.14);
    background-image: linear-gradient(180deg, #0B8C8C 0%, #007373 100%) !important;
    min-height: 56px;
}

.main-header::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--egoji-secondary) 0 34%, var(--egoji-accent) 34% 67%, var(--egoji-ink) 67% 100%);
}

.skin-blue .main-header .navbar .navbar-brand,
.main-header .navbar-brand {
    color: var(--egoji-on-primary) !important;
    font-weight: 700;
    letter-spacing: .01em;
    padding-top: 16px;
    padding-bottom: 16px;
}

.skin-blue .main-header .navbar .nav > li > a,
.navbar-static-top .navbar-nav > li > a {
    color: var(--egoji-on-primary) !important;
    font-weight: 600;
    padding-top: 18px;
    padding-bottom: 18px;
    transition: background-color .15s ease;
}

    .skin-blue .main-header .navbar .nav > li > a:hover,
    .skin-blue .main-header .navbar .nav > li > a:focus,
    .skin-blue .main-header .navbar .nav .open > a,
    .skin-blue .main-header .navbar .nav .open > a:hover,
    .skin-blue .main-header .navbar .nav .open > a:focus,
    .navbar-static-top .navbar-nav > li > a:hover,
    .navbar-static-top .navbar-nav > li > a:focus,
    .navbar-static-top .navbar-nav > .open > a {
        background-color: rgba(255,255,255,.14) !important;
        color: var(--egoji-on-primary) !important;
    }

/* Active menu item: darker teal with a yellow marker */
.skin-blue .main-header .navbar .nav > .active > a,
.navbar-static-top .navbar-nav > .active > a {
    background-color: var(--egoji-primary-dark) !important;
    color: var(--egoji-on-primary) !important;
    box-shadow: inset 0 -3px 0 var(--egoji-accent);
}

.skin-blue .main-header .navbar .navbar-toggle {
    color: var(--egoji-on-primary);
    border-color: rgba(255,255,255,.45);
}

    .skin-blue .main-header .navbar .navbar-toggle:hover {
        background: rgba(255,255,255,.14);
    }

.navbar-static-top .dropdown-menu {
    border: none;
    border-radius: var(--egoji-radius);
    box-shadow: var(--egoji-shadow);
    padding: 6px;
    margin-top: 4px;
}

    .navbar-static-top .dropdown-menu > li > a {
        border-radius: 6px;
        padding: 8px 12px;
        color: var(--egoji-ink) !important;
        font-weight: 500;
        background: transparent !important;
        transition: background-color .15s ease, color .15s ease;
    }

        .navbar-static-top .dropdown-menu > li > a:hover,
        .navbar-static-top .dropdown-menu > li > a:focus {
            background-color: var(--egoji-primary-tint) !important;
            color: var(--egoji-primary-dark) !important;
        }

    .navbar-static-top .dropdown-menu > li.divider {
        margin: 4px 2px;
    }

/* ==========================================================
   Page header / breadcrumb
   ========================================================== */
.content-wrapper {
    background: transparent;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-header {
    padding: 20px 5px 10px;
}

    .content-header > h1 {
        font-size: 24px;
        position: relative;
        padding-bottom: 10px;
    }

        .content-header > h1::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 44px;
            height: 4px;
            border-radius: 2px;
            background: var(--egoji-secondary);
        }

.breadcrumb {
    background: #fff;
    border: 1px solid var(--egoji-border);
    border-radius: 20px;
    padding: 6px 16px;
    box-shadow: none;
}

    .breadcrumb > li + li:before {
        color: #c3ccd1;
    }

    .breadcrumb > .active {
        color: var(--egoji-muted);
    }

/* ==========================================================
   Cards / boxes: neutral by default, brand on the accent edge
   ========================================================== */
.box {
    border: 1px solid var(--egoji-border);
    border-top: 3px solid var(--egoji-border);
    border-radius: var(--egoji-radius);
    box-shadow: var(--egoji-shadow);
}

    .box.box-solid {
        border: 1px solid var(--egoji-border);
    }

.box-header {
    padding: 14px 18px;
    border-radius: var(--egoji-radius) var(--egoji-radius) 0 0;
}

    .box-header .box-title {
        font-size: 16px;
    }

.box-body {
    padding: 18px;
}

/* Outlined variants: coloured top edge only */
.box.box-primary {
    border-top-color: var(--egoji-primary);
}

.box.box-info, .box.box-success {
    border-top-color: var(--egoji-secondary);
}

.box.box-warning {
    border-top-color: var(--egoji-accent);
}

/* Solid variants: light tinted header with a coloured base line and coloured title (calm, not a filled slab) */
.box.box-solid.box-primary > .box-header {
    background-color: var(--egoji-primary-tint);
    border-bottom: 2px solid var(--egoji-primary);
}

.box.box-solid.box-info > .box-header,
.box.box-solid.box-success > .box-header {
    background-color: var(--egoji-secondary-tint);
    border-bottom: 2px solid var(--egoji-secondary);
}

.box.box-solid.box-warning > .box-header {
    background-color: var(--egoji-accent-tint);
    border-bottom: 2px solid var(--egoji-accent);
}

.box.box-solid.box-primary > .box-header .box-title,
.box.box-solid.box-primary > .box-header .btn { color: var(--egoji-primary-dark); }

.box.box-solid.box-info > .box-header .box-title,
.box.box-solid.box-success > .box-header .box-title { color: var(--egoji-secondary-deep); }

.box.box-solid.box-warning > .box-header .box-title { color: #6B5300; }

.box.box-solid.box-primary { border: 1px solid var(--egoji-primary); }
.box.box-solid.box-info, .box.box-solid.box-success { border: 1px solid var(--egoji-secondary); }
.box.box-solid.box-warning { border: 1px solid var(--egoji-accent); }

/* A small orange marker before every card title gives the cards rhythm without adding weight */
.box-header .box-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 10px;
    border-radius: 2px;
    background: var(--egoji-secondary);
    vertical-align: -2px;
}

/* ==========================================================
   Dashboard tiles: the four crest colours, evenly spread
   teal | orange | ink | yellow
   ========================================================== */
.info-box, .small-box {
    border-radius: var(--egoji-radius);
    box-shadow: var(--egoji-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .info-box:hover, .small-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(20,30,40,.12);
    }

.info-box {
    border: 1px solid transparent;
}

    .info-box .info-box-icon {
        border-radius: var(--egoji-radius) 0 0 var(--egoji-radius);
    }

/* White cards; colour lives in the icon block, the progress bar and the link.
   teal | orange | ink | yellow - one per tile, so the row is balanced instead of four solid slabs. */
.info-box, .info-box[class*="bg-"] {
    background-color: #fff !important;
    color: var(--egoji-ink) !important;
}

    .info-box .info-box-text {
        color: var(--egoji-muted);
        font-weight: 600;
        letter-spacing: .04em;
    }

    .info-box .info-box-number {
        color: var(--egoji-ink);
        font-size: 24px;
    }

    .info-box .progress {
        background: #E8EFEF;
    }

        .info-box .progress .progress-bar {
            background-color: var(--egoji-primary);
        }

.info-box.bg-green .info-box-icon { background-color: var(--egoji-primary) !important; color: #fff; }
.info-box.bg-yellow .info-box-icon { background-color: var(--egoji-secondary) !important; color: var(--egoji-on-secondary); }
.info-box.bg-red .info-box-icon { background-color: var(--egoji-ink) !important; color: #fff; }
.info-box.bg-aqua .info-box-icon, .info-box.bg-light-blue .info-box-icon { background-color: var(--egoji-accent) !important; color: var(--egoji-on-secondary); }

.info-box.bg-yellow .progress-bar { background-color: var(--egoji-secondary); }
.info-box.bg-red .progress-bar { background-color: var(--egoji-ink); }
.info-box.bg-aqua .progress-bar, .info-box.bg-light-blue .progress-bar { background-color: var(--egoji-accent); }

/* Links carry inline white text in the markup; !important puts a readable brand tone on white */
.info-box.bg-green a { color: var(--egoji-primary-dark) !important; }
.info-box.bg-yellow a { color: var(--egoji-secondary-deep) !important; }
.info-box.bg-red a { color: var(--egoji-ink-soft) !important; }
.info-box.bg-aqua a, .info-box.bg-light-blue a { color: #7A5F00 !important; }
.info-box a { font-weight: 600; }

/* small-box (unused today, kept consistent) */
.small-box.bg-green { background-color: var(--egoji-primary) !important; color: #fff !important; }
.small-box.bg-yellow { background-color: var(--egoji-secondary) !important; color: var(--egoji-on-secondary) !important; }
.small-box.bg-red { background-color: var(--egoji-ink) !important; color: #fff !important; }
.small-box.bg-aqua, .small-box.bg-light-blue { background-color: var(--egoji-accent) !important; color: var(--egoji-on-secondary) !important; }

.small-box > .small-box-footer {
    border-radius: 0 0 var(--egoji-radius) var(--egoji-radius);
}

/* ==========================================================
   Buttons: primary/info = teal, success (Submit/Save) = orange, warning = yellow
   ========================================================== */
.btn {
    border-radius: 6px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary, .btn-info {
    background-color: var(--egoji-primary);
    border-color: var(--egoji-primary-dark);
    color: var(--egoji-on-primary);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
    .btn-info:hover, .btn-info:focus, .btn-info:active {
        background-color: var(--egoji-primary-dark);
        border-color: var(--egoji-primary-dark);
        color: var(--egoji-on-primary);
    }

.btn-success {
    background-color: var(--egoji-secondary);
    border-color: var(--egoji-secondary-dark);
    color: var(--egoji-on-secondary);
}

    .btn-success:hover, .btn-success:focus, .btn-success:active {
        background-color: var(--egoji-secondary-dark);
        border-color: var(--egoji-secondary-dark);
        color: var(--egoji-on-secondary);
    }

.btn-warning {
    background-color: var(--egoji-accent);
    border-color: #E6B800;
    color: var(--egoji-on-secondary);
}

    .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
        background-color: #F2C31F;
        border-color: #E6B800;
        color: var(--egoji-on-secondary);
    }

.btn-danger {
    background-color: var(--egoji-danger);
    border-color: #C13A2E;
}

.btn-default {
    background-color: #fff;
    border-color: var(--egoji-border);
    color: var(--egoji-ink);
}

    .btn-default:hover, .btn-default:focus {
        background-color: var(--egoji-primary-tint);
        border-color: var(--egoji-primary);
        color: var(--egoji-primary-dark);
    }

/* ==========================================================
   Tables / DataTables
   ========================================================== */
.table > thead > tr > th {
    background-color: #F7FAFA;
    border-bottom: 2px solid var(--egoji-border);
    color: var(--egoji-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table > tbody > tr > td {
    border-top-color: var(--egoji-border);
    vertical-align: middle;
}

/* GridViews that set an inline green header: soft teal tint with a teal base line */
table tr[style*="1e844a" i],
table tr[style*="1e844a" i] > th,
table tr[style*="1e844a" i] > td {
    background-color: var(--egoji-primary-tint) !important;
    color: var(--egoji-primary-dark) !important;
}

table tr[style*="1e844a" i] > th {
    border-bottom: 2px solid var(--egoji-primary) !important;
}


table.dataTable tr.odd,
table.dataTable tr.even {
    background: transparent;
}

table.dataTable tbody tr:hover,
.table-hover > tbody > tr:hover {
    background-color: var(--egoji-primary-tint) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 6px;
    border: 1px solid var(--egoji-border);
}

/* ==========================================================
   Forms: teal focus
   ========================================================== */
.form-control {
    border-radius: 6px;
    border-color: var(--egoji-border);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:focus {
        border-color: var(--egoji-primary);
        box-shadow: 0 0 0 3px rgba(0,128,128,.16);
    }

label {
    font-weight: 600;
    color: var(--egoji-ink);
}

/* Select2 (blue by default) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--egoji-primary);
    color: var(--egoji-on-primary);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--egoji-primary);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--egoji-primary);
    border-color: var(--egoji-primary-dark);
    color: var(--egoji-on-primary);
}

/* ==========================================================
   Tabs, pagination, progress
   ========================================================== */
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--egoji-secondary);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    border-top: 3px solid var(--egoji-secondary);
    color: var(--egoji-ink);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background-color: var(--egoji-primary);
    color: var(--egoji-on-primary);
}

.pagination > li > a,
.pagination > li > span {
    border-radius: 6px !important;
    margin: 0 2px;
    border-color: var(--egoji-border);
    color: var(--egoji-ink);
}

    .pagination > li > a:hover {
        background-color: var(--egoji-primary-tint);
        color: var(--egoji-primary-dark);
    }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--egoji-primary);
    border-color: var(--egoji-primary-dark);
    color: var(--egoji-on-primary);
}

.progress-bar, .progress-bar-primary {
    background-color: var(--egoji-primary);
}

.progress-bar-info, .progress-bar-success {
    background-color: var(--egoji-secondary);
}

.progress-bar-warning {
    background-color: var(--egoji-accent);
}

/* ==========================================================
   Labels / badges / alerts
   ========================================================== */
.label {
    border-radius: 4px;
    font-weight: 600;
}
/* Soft tinted pills (dark text on a light tint of the brand colour) - readable without shouting.
   AdminLTE declares its label/badge colours with !important, so these must too. */
.label-primary, .badge-primary, .badge.bg-light-blue {
    background-color: #D3ECEA !important;
    color: #00524F !important;
}

.label-info, .label-success {
    background-color: #FFE0CC !important;
    color: #8A3305 !important;
}

.label-warning {
    background-color: #FFF0B0 !important;
    color: #6B5300 !important;
}

.label-danger {
    background-color: #FADAD6 !important;
    color: #9C2A20 !important;
}

.label-default {
    background-color: #E4EBEC !important;
    color: var(--egoji-ink-soft) !important;
}


.callout.callout-info, .alert-info {
    background-color: var(--egoji-primary-tint) !important;
    border-color: var(--egoji-primary) !important;
    color: var(--egoji-primary-dark) !important;
    border-radius: var(--egoji-radius);
}

.callout.callout-success, .alert-success {
    background-color: var(--egoji-secondary-tint) !important;
    border-color: var(--egoji-secondary) !important;
    color: #8A3305 !important;
    border-radius: var(--egoji-radius);
}

.callout.callout-warning, .alert-warning {
    background-color: var(--egoji-accent-tint) !important;
    border-color: var(--egoji-accent) !important;
    color: #6B5300 !important;
    border-radius: var(--egoji-radius);
}

/* ==========================================================
   Modals
   ========================================================== */
.modal-content {
    border: none;
    border-top: 4px solid var(--egoji-secondary);
    border-radius: var(--egoji-radius);
    box-shadow: 0 12px 32px rgba(20,30,40,.2);
}

.modal-header {
    border-bottom: 1px solid var(--egoji-border);
}

.modal-footer {
    border-top: 1px solid var(--egoji-border);
}

/* ==========================================================
   Footer: ink, anchors the page (crest black)
   ========================================================== */
.main-footer {
    background: var(--egoji-ink);
    border-top: 3px solid var(--egoji-secondary);
    color: #C8D1D6;
    font-size: 12px;
    padding: 16px 0;
}

    .main-footer a {
        color: var(--egoji-secondary);
        font-weight: 600;
    }

        .main-footer a:hover {
            color: var(--egoji-accent);
        }

/* ==========================================================
   Login / reset pages (Site.Master)
   ========================================================== */
body.login-page {
    background: linear-gradient(135deg, var(--egoji-primary-tint) 0%, #ffffff 45%, var(--egoji-secondary-tint) 100%) fixed !important;
}

.wrap-login100 {
    border-top: 5px solid var(--egoji-primary);
}

.wrap-login100-form-btn {
    background-color: var(--egoji-primary) !important;
}

.login100-form-btn {
    color: var(--egoji-on-primary) !important;
}

.login100-form-bgbtn {
    background: linear-gradient(90deg, var(--egoji-primary-dark), var(--egoji-primary), var(--egoji-primary-dark)) !important;
}

.focus-input100::before {
    background: linear-gradient(90deg, var(--egoji-primary), var(--egoji-secondary)) !important;
}

.btn-show-pass:hover, .btn-show-pass.active {
    color: var(--egoji-primary) !important;
}