/* ============================================================
   IntiAudit — Corporate Forest Green Theme
   Inspired by: GYS / professional enterprise green
   Primary : #006644  (deep forest green)
   Mid     : #007A52  (medium green)
   Accent  : #00AA66  (bright green)
   ============================================================ */

:root {
  --ia-d1:      #004A30;
  --ia-d2:      #006644;
  --ia-d3:      #007A52;
  --ia-cyan:    #00AA66;
  --ia-bright:  #33CC88;
  --ia-white:   #FFFFFF;
  --ia-bg:      #F0F4F2;
  --ia-text-dim: #7FBFA0;
}

/* ================================================================
   SIDEBAR & WRAPPER — forced with !important
   ================================================================ */
.skin-blue .left-side,
.skin-blue .main-sidebar,
.skin-blue .wrapper {
    background: linear-gradient(180deg,
        var(--ia-d1) 0%,
        var(--ia-d2) 50%,
        var(--ia-d3) 100%) !important;
}

/* ================================================================
   TOP HEADER / LOGO + NAVBAR
   ================================================================ */
.skin-blue .main-header .logo {
    background-color: var(--ia-d1) !important;
    color: var(--ia-bright) !important;
    border-bottom: 0 !important;
    border-right: 1px solid rgba(0,170,102,0.25) !important;
}
.skin-blue .main-header .logo:hover {
    background-color: var(--ia-d2) !important;
}
.skin-blue .main-header .navbar {
    background-color: var(--ia-d1) !important;
    border-bottom: 1px solid rgba(0,170,102,0.20) !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.30) !important;
}
.skin-blue .main-header .navbar .nav > li > a {
    color: var(--ia-text-dim) !important;
}
.skin-blue .main-header .navbar .nav > li > a:hover {
    color: var(--ia-white) !important;
    background: rgba(0,170,102,0.12) !important;
}
.skin-blue .main-header .navbar .sidebar-toggle {
    color: var(--ia-text-dim) !important;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    color: var(--ia-bright) !important;
    background: rgba(0,170,102,0.12) !important;
}

/* ================================================================
   SIDEBAR MENU ITEMS
   ================================================================ */
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.sidebar-menu > li > a {
    font-size: 14px !important;
    padding: 12px 5px 12px 15px !important;
}
.skin-blue .sidebar-menu > li > a {
    color: #90C8B0 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.18s ease !important;
    font-size: 14px !important;
}
.skin-blue .sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li > a:focus {
    color: var(--ia-white) !important;
    background: rgba(0,170,102,0.18) !important;
    border-left-color: var(--ia-cyan) !important;
}
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a {
    color: var(--ia-d1) !important;
    background: linear-gradient(90deg, var(--ia-cyan) 0%, var(--ia-bright) 100%) !important;
    border-left-color: var(--ia-bright) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(0,170,102,0.40) !important;
}

/* ================================================================
   TREEVIEW (submenu)
   ================================================================ */
.skin-blue .treeview-menu {
    background: rgba(0,0,0,0.18) !important;
}
.skin-blue .treeview-menu > li > a {
    color: #6AAF90 !important;
    font-size: 13px !important;
    padding: 8px 5px 8px 30px !important;
}
.skin-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a {
    color: var(--ia-bright) !important;
    background: transparent !important;
}
.skin-blue .sidebar-menu .treeview.active > a {
    color: var(--ia-cyan) !important;
    background: rgba(0,170,102,0.10) !important;
    border-left-color: var(--ia-cyan) !important;
}

/* ================================================================
   GLOBAL FONT SIZE — fix tiny text
   ================================================================ */
body {
    font-size: 14px !important;
}
.main-sidebar,
.main-sidebar * {
    font-size: 14px;
}
.treeview-menu > li > a {
    font-size: 13px !important;
}
.table, .table td, .table th {
    font-size: 13px;
}
.form-control {
    font-size: 14px !important;
}
label {
    font-size: 13px;
    font-weight: 600;
}
.box-header .box-title {
    font-size: 16px;
}

/* ================================================================
   USER PANEL in sidebar
   ================================================================ */
.skin-blue .main-sidebar .user-panel > .info,
.skin-blue .main-sidebar .user-panel > .info > a {
    color: var(--ia-text-dim) !important;
}

/* ================================================================
   NAV MISC
   ================================================================ */
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: 14px;
}

/* ================================================================
   CONTENT AREA
   ================================================================ */
.content-wrapper,
.right-side {
    background-color: var(--ia-bg) !important;
}
.content-header h3 {
    color: var(--ia-d2);
    font-weight: 700;
    border-left: 4px solid var(--ia-cyan);
    padding-left: 10px;
    margin: 0;
}
.content-header > .breadcrumb {
    background: transparent;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
    background-color: var(--ia-d2) !important;
    border-color: var(--ia-cyan) !important;
    color: var(--ia-white) !important;
    transition: all 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--ia-cyan) !important;
    border-color: var(--ia-bright) !important;
    color: var(--ia-d1) !important;
    box-shadow: 0 4px 14px rgba(0,170,102,0.40) !important;
}

/* ================================================================
   BOX CARDS
   ================================================================ */
.box {
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,50,30,0.10);
}
.box-header {
    border-bottom: 1px solid rgba(0,170,102,0.18);
}
.box-header .box-title { color: var(--ia-d2); font-weight: 700; }
.box.box-primary  { border-top-color: var(--ia-cyan) !important; }
.box.box-info     { border-top-color: var(--ia-d3) !important; }
.box.box-success  { border-top-color: #2ECC71 !important; }

/* ================================================================
   DATA TABLES
   ================================================================ */
table.dataTable thead th {
    background: var(--ia-d2) !important;
    color: var(--ia-white) !important;
    border-bottom: 2px solid var(--ia-cyan) !important;
    font-weight: 700;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    border-bottom: 3px solid var(--ia-bright) !important;
}
table.dataTable tbody tr:hover td {
    background-color: rgba(0,170,102,0.07) !important;
}

/* ================================================================
   MODAL
   ================================================================ */
.modal-header {
    padding: 14px 20px;
    background: linear-gradient(90deg, var(--ia-d1) 0%, var(--ia-d3) 100%) !important;
    border-bottom: 2px solid var(--ia-cyan) !important;
    border-radius: 4px 4px 0 0;
}
.modal-title {
    margin: 0;
    line-height: 1.4;
    color: var(--ia-white);
    font-weight: 700;
}
.modal-header .close { margin-top: -14px; }
button.close { padding: 0; background: none; border: none; }
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--ia-white) !important;
    background-color: transparent !important;
    opacity: 0.85;
    text-shadow: none;
}
.close:hover { opacity: 1; }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-page,
.register-page {
    background: linear-gradient(135deg,
        var(--ia-d1) 0%,
        var(--ia-d2) 55%,
        #009955 100%) !important;
}
.login-box-body {
    background: rgba(255,255,255,0.97) !important;
    border: none;
    border-top: 4px solid var(--ia-cyan) !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 42px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,170,102,0.15);
}
.login-box .login-box-msg { color: var(--ia-d2); font-weight: 600; }
.login-box .form-control:focus {
    border-color: var(--ia-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0,170,102,0.18) !important;
}

/* ================================================================
   MISC
   ================================================================ */
.buttons { padding-bottom: 20px; }
.note-editable { background-color: white !important; color: black !important; }
.swal2-popup { font-size: 1.5rem !important; }
.info-box { border-radius: 6px; overflow: hidden; }
.info-box-icon { line-height: 90px; }


/* ================================================================
   SIDEBAR & WRAPPER
   Cinematic teal-black gradient — totally different from old navy
   ================================================================ */
.skin-blue .left-side,
.skin-blue .main-sidebar,
.skin-blue .wrapper {
    background: linear-gradient(180deg,
        var(--ia-d1) 0%,
        var(--ia-d2) 50%,
        var(--ia-d3) 100%);
}

/* ================================================================
   TOP HEADER / LOGO STRIP + NAVBAR
   ================================================================ */
.skin-blue .main-header .logo {
    background: var(--ia-d1);
    color: var(--ia-cyan);
    border-bottom: 0;
    border-right: 1px solid rgba(0,201,204,0.20);
}
.skin-blue .main-header .navbar {
    background: var(--ia-d1);
    border-bottom: 1px solid rgba(0,201,204,0.15);
    box-shadow: 0 3px 14px rgba(0,0,0,0.45);
}
.skin-blue .main-header .navbar .nav > li > a {
    color: var(--ia-text-dim);
    transition: color 0.2s;
}
.skin-blue .main-header .navbar .nav > li > a:hover {
    color: var(--ia-bright);
    background: rgba(0,201,204,0.10);
}
/* sidebar toggle hamburger icon */
.skin-blue .main-header .navbar .sidebar-toggle {
    color: var(--ia-text-dim);
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    color: var(--ia-bright);
    background: rgba(0,201,204,0.12);
}

/* ================================================================
   SIDEBAR MENU ITEMS
   ================================================================ */
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
}
.skin-blue .sidebar-menu > li > a {
    color: #7FB8C5;
    border-left: 3px solid transparent;
    letter-spacing: 0.2px;
    transition: all 0.18s ease;
}
.skin-blue .sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li > a:focus {
    color: var(--ia-bright);
    background: rgba(0,201,204,0.12);
    border-left-color: var(--ia-cyan);
}
.skin-blue .sidebar-menu > li.active > a {
    color: var(--ia-d1);
    background: linear-gradient(90deg, var(--ia-cyan) 0%, #00A8AB 100%);
    border-left-color: var(--ia-bright);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,201,204,0.35);
    text-shadow: none;
}

/* ================================================================
   TREEVIEW (submenu)
   ================================================================ */
.skin-blue .treeview-menu {
    background: rgba(0,0,0,0.20);
}
.skin-blue .treeview-menu > li > a {
    color: #5D98A8;
    transition: color 0.18s;
}
.skin-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a {
    color: var(--ia-bright);
}
.skin-blue .sidebar-menu .treeview.active > a {
    color: var(--ia-cyan);
    border-left-color: var(--ia-cyan);
    background: rgba(0,201,204,0.08);
}
.skin-blue .sidebar-menu .treeview-menu > li.active > a {
    color: var(--ia-cyan);
    font-weight: 600;
}
/* arrow icons */
.skin-blue .sidebar-menu > li > a > .fa-angle-left,
.skin-blue .sidebar-menu > li > a > .pull-right-container > .fa-angle-left {
    color: #3A7A88;
}

/* ================================================================
   NAV MISC
   ================================================================ */
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: initial;
}

/* ================================================================
   CONTENT AREA
   ================================================================ */
.content-wrapper {
    background-color: var(--ia-bg);
}

/* Page section header */
.content-header h3 {
    color: var(--ia-d2);
    font-weight: 700;
    border-left: 4px solid var(--ia-cyan);
    padding-left: 10px;
    margin: 0;
}
.content-header > .breadcrumb {
    background: transparent;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--ia-d3) 0%, var(--ia-d2) 100%);
    border-color: var(--ia-cyan);
    color: var(--ia-white);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,201,204,0.20);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: linear-gradient(135deg, var(--ia-cyan) 0%, #009EA0 100%);
    border-color: var(--ia-bright);
    color: var(--ia-d1);
    box-shadow: 0 4px 16px rgba(0,201,204,0.40);
}
.btn-success {
    background: linear-gradient(135deg, #00897B 0%, #00695C 100%);
    border-color: #4DB6AC;
}
.btn-info {
    background: linear-gradient(135deg, var(--ia-d3) 0%, #1E5F74 100%);
    border-color: #5BA3B5;
}

/* ================================================================
   BOX CARDS
   ================================================================ */
.box {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(15,32,39,0.12);
    border-top-color: var(--ia-cyan);
}
.box-header {
    border-bottom: 1px solid rgba(0,201,204,0.20);
}
.box-header .box-title {
    color: var(--ia-d2);
    font-weight: 700;
}
.box.box-primary  { border-top-color: var(--ia-cyan); }
.box.box-info     { border-top-color: var(--ia-d3); }
.box.box-success  { border-top-color: #26A69A; }
.box.box-warning  { border-top-color: #FFA726; }
.box.box-danger   { border-top-color: #EF5350; }

/* ================================================================
   DATA TABLES
   ================================================================ */
table.dataTable thead th {
    background: linear-gradient(180deg, var(--ia-d2) 0%, var(--ia-d1) 100%) !important;
    color: var(--ia-bright) !important;
    border-bottom: 2px solid rgba(0,201,204,0.40) !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    border-bottom: 3px solid var(--ia-cyan) !important;
}
table.dataTable tbody tr:hover {
    background-color: rgba(0,201,204,0.06) !important;
}

/* ================================================================
   MODAL
   ================================================================ */
.modal-header {
    padding: 14px 20px;
    background: linear-gradient(90deg, var(--ia-d1) 0%, var(--ia-d3) 100%);
    border-bottom: 2px solid var(--ia-cyan);
    border-radius: 4px 4px 0 0;
}
.modal-title {
    margin: 0;
    line-height: 1.4;
    color: var(--ia-bright);
    font-weight: 700;
    letter-spacing: 0.4px;
}
.modal-header .close {
    margin-top: -14px;
}
button.close {
    padding: 0;
    background: none;
    border: none;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--ia-bright) !important;
    background-color: transparent !important;
    opacity: 0.8;
    text-shadow: none;
}
.close:hover { opacity: 1; color: var(--ia-white) !important; }

/* ================================================================
   LOGIN PAGE — glassmorphism card on cinematic background
   ================================================================ */
.login-page,
.register-page {
    background: linear-gradient(135deg,
        var(--ia-d1) 0%,
        var(--ia-d2) 50%,
        #1A4A50 100%) !important;
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(0,201,204,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(44,83,100,0.40) 0%, transparent 60%),
        linear-gradient(135deg, var(--ia-d1) 0%, var(--ia-d2) 50%, #1A4A50 100%) !important;
}
.login-box-body {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px);
    border: none;
    border-top: 4px solid var(--ia-cyan);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,201,204,0.15);
}
.login-box .login-box-msg {
    color: var(--ia-d2);
    font-weight: 600;
}
.login-box .form-control:focus {
    border-color: var(--ia-cyan);
    box-shadow: 0 0 0 3px rgba(0,201,204,0.20);
}

/* ================================================================
   MISC
   ================================================================ */
.buttons {
    padding-bottom: 20px;
}
.note-editable {
    background-color: white !important;
    color: black !important;
}
.swal2-popup {
    font-size: 1.5rem !important;
}
.info-box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15,32,39,0.12);
}
.info-box-icon {
    line-height: 90px;
}
/* scrollbar tinting for webkit */
.main-sidebar ::-webkit-scrollbar { width: 4px; }
.main-sidebar ::-webkit-scrollbar-track { background: var(--ia-d1); }
.main-sidebar ::-webkit-scrollbar-thumb { background: var(--ia-d3); border-radius: 4px; }