/* ============================================================
   creativeBoard — Unified Design System  v2
   Single source of truth for all app styling.
   Font: Outfit (display) + Inter (body) via fonts.bunny.net
   ============================================================ */

@import url("https://fonts.bunny.net/css?family=outfit:400,600,700,800|inter:400,500&display=swap");


/* ============================================================
   1. DESIGN TOKENS  (ALL tokens in one place)
   ============================================================ */

:root {

  /* ── Brand ────────────────────────────────────────────── */
  --ink:          #0b1120;
  --ink-mid:      #1e2d45;
  --ink-light:    #2e4060;
  --gold:         #c9a84c;
  --gold-dim:     #a8893d;
  --sand:         #f4efe6;

  /* ── App surfaces ─────────────────────────────────────── */
  --bg:           #f4f6f9;   /* unified — was #f8fafc in style, #f4f6f9 in patch */
  --card:         #ffffff;
  --border:       #e2e8f0;
  --muted:        #64748b;
  --text:         #1e293b;

  /* ── Sidebar (dark) ───────────────────────────────────── */
  --sidebar-bg:           #0b1120;
  --sidebar-border:       rgba(255,255,255,0.07);
  --sidebar-text:         #94a3b8;
  --sidebar-text-hover:   #f1f5f9;
  --sidebar-icon:         #64748b;
  --sidebar-icon-hover:   #c9a84c;
  --sidebar-active-bg:    rgba(201,168,76,0.15);
  --sidebar-active-text:  #c9a84c;
  --sidebar-active-icon:  #c9a84c;
  --sidebar-header-bg:    #0d1526;
  --sidebar-header-border:rgba(201,168,76,0.2);

  /* ── Navbar ───────────────────────────────────────────── */
  --navbar-bg:            #ffffff;
  --navbar-border:        #e2e8f0;
  --navbar-text:          #1e2d45;

  /* ── Accent (purple — legacy pills, tables) ───────────── */
  --accent:       #7f73f8;
  --accent-end:   #a872f8;
  --accent-grad:  linear-gradient(180deg, #7f73f8 0%, #a872f8 100%);

  /* ── Status ───────────────────────────────────────────── */
  --success:      #1ad598;
  --warning:      #f59e0b;
  --danger:       #e05a5a;
  --info:         #0ea5e9;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ── Geometry ─────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    16px;
  --shadow:       0 6px 18px rgba(0,0,0,0.08);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.06);
}


/* ============================================================
   2. RESET + BASE
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   3. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar       { width: 3px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8b4fe5; }

#sidebar ::-webkit-scrollbar-thumb       { background: rgba(201,168,76,.4); }
#sidebar ::-webkit-scrollbar-thumb:hover { background: var(--gold); }


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1.2; }

.page-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); margin-bottom: 20px; }
.page_header_txt { font-weight: 500; font-size: 24px; color: #06152b; margin-bottom: 20px; } /* legacy */

label { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink-mid); margin-bottom: 5px; display: block; }

a { text-decoration: none; color: var(--gold-dim); }
a:hover { color: var(--gold); }


/* ============================================================
   5. LAYOUT
   ============================================================ */

.wrapper { display: flex; min-height: 100%; }
.nav_stick { position: fixed; top: 0; }
.main_content_m70 { margin-top: 70px; padding: 15px 30px; }
.fs_20 { font-size: 20px; color: #eef1f3; }


/* ============================================================
   6. SIDEBAR — legacy .sidebar class
   ============================================================ */

.sidebar { display: flex; flex-direction: column; width: 260px; background: var(--card); box-shadow: 1.5px 0 6px rgba(59,124,255,0.1); z-index: 42; transition: all .5s ease; }
.sidebar.close { width: 78px; }

.sidebar .logo-details { height: 60px; width: 100%; display: flex; align-items: center; }
.sidebar .logo-details i { font-size: 30px; color: var(--ink-mid); height: 50px; min-width: 78px; text-align: center; line-height: 50px; }
.sidebar .logo-details .logo_name { font-family: var(--font-display); font-size: 20px; color: var(--ink); font-weight: 700; transition: .3s ease .1s; white-space: nowrap; }
.sidebar.close .logo-details .logo_name { transition-delay: 0s; opacity: 0; pointer-events: none; }

.sidebar .nav-links { height: 100%; padding: 30px 0 100px; overflow: auto; }
.sidebar.close .nav-links { overflow: visible; }
.sidebar .nav-links::-webkit-scrollbar { display: none; }

.sidebar .nav-links li { position: relative; list-style: none; transition: all .4s ease; margin: 3px 10px; border-radius: var(--radius-sm); background: var(--card); }

.sidebar .nav-links .active { background: var(--accent-grad); border-radius: var(--radius-sm); }
.sidebar .nav-links .active i,
.sidebar .nav-links .active .link_name { color: #fff !important; }

.sidebar .nav-links li .icon-link { display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-sm); }
.sidebar.close .nav-links li .icon-link { display: block; }

.sidebar .nav-links li i { height: 50px; min-width: 55px; text-align: center; line-height: 50px; color: var(--ink-mid); font-size: 20px; cursor: pointer; transition: all .3s ease; }
.sidebar .nav-links li.showMenu i.arrow { transform: rotate(-180deg); }
.sidebar.close .nav-links i.arrow { display: none; }

.sidebar .nav-links li a { display: flex; align-items: center; text-decoration: none; }
.sidebar .nav-links li a .link_name { font-size: 14px; font-weight: 500; color: var(--ink-mid); transition: all .4s ease; }
.sidebar.close .nav-links li a .link_name { opacity: 0; pointer-events: none; }

.sidebar .nav-links li .sub-menu { padding: 6px; background: var(--card); display: none; }
.sidebar .nav-links li.showMenu .sub-menu { display: block; }
.sidebar .nav-links li .sub-menu a { color: var(--ink-mid); font-size: 13px; padding: 5px 0; white-space: nowrap; opacity: .6; transition: all .3s ease; font-weight: 500; }
.sidebar .nav-links li .sub-menu a:hover { opacity: 1; color: var(--accent); }
.a_active { color: var(--accent) !important; opacity: 1 !important; }

.sidebar.close .nav-links li .sub-menu { position: absolute; left: 100%; top: -10px; padding: 20px; opacity: 0; display: block; pointer-events: none; transition: 0s; border-radius: var(--radius-sm); }
.sidebar.close .nav-links li:hover .sub-menu { top: 0; opacity: 1; pointer-events: auto; transition: all .4s ease; }
.sidebar .nav-links li .sub-menu .link_name { display: none; }
.sidebar.close .nav-links li .sub-menu .link_name { font-size: 14px; opacity: 1; display: block; }
.sidebar .nav-links li .sub-menu.blank { opacity: 0; pointer-events: none; padding: 3px 20px 6px 16px; }
.sidebar .nav-links li:hover .sub-menu.blank { top: 50%; transform: translateY(-50%); }

.tree_view .sub-menu li { padding-left: 1em; border: 2px solid #dee5e8; border-width: 0 0 2px 2px; border-bottom-left-radius: var(--radius-sm); margin-top: -2px; }
.tree_view .sub-menu li p { margin: 0; background: white; position: relative; z-index: 10; top: 1em; padding-left: 5px; }
.tree_view .sub-menu li p .tree_brdr { border-left: 2px solid #dee5e8; margin-left: -23px; }
.tree_view .sub-menu li p .tree_padd { padding-left: 20px; }

.sidebar .profile-details { position: fixed; bottom: 0; width: 260px; display: flex; align-items: center; justify-content: space-between; background: var(--ink); padding: 12px 0; transition: all .5s ease; }
.sidebar.close .profile-details { background: none; width: 78px; }
.sidebar .profile-details .profile-content { display: flex; align-items: center; }
.sidebar .profile-details img { height: 52px; width: 52px; object-fit: cover; border-radius: var(--radius-sm); margin: 0 14px 0 12px; background: var(--ink); transition: all .5s ease; }
.sidebar.close .profile-details img { padding: 10px; }
.sidebar .profile-details .job,
.sidebar .profile-details .profile_name { color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; }
.sidebar.close .profile-details .job,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details i { display: none; }
.sidebar .profile-details .job { font-size: 12px; }
.dp_nav { width: 50px; height: 50px; border-radius: 50%; margin: 0 10px 0 5px; }


/* ============================================================
   7. SIDEBAR — #sidebar id (Tailwind-based layout)
   ============================================================ */

#sidebar { background-color: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important; border-left: 3px solid var(--gold) !important; }
.sidebar-header { background-color: var(--sidebar-header-bg) !important; border-bottom: 1px solid var(--sidebar-header-border) !important; }

#sidebar nav a,
#sidebar nav button { color: var(--sidebar-text) !important; background-color: transparent !important; }
#sidebar nav a i,
#sidebar nav button i { color: var(--sidebar-icon) !important; transition: color .2s; }
#sidebar nav a:hover,
#sidebar nav button:hover { background-color: rgba(255,255,255,0.06) !important; color: var(--sidebar-text-hover) !important; }
#sidebar nav a:hover i,
#sidebar nav button:hover i { color: var(--sidebar-icon-hover) !important; }

#sidebar nav a.bg-green-100,
#sidebar nav a[class*="bg-green"] { background-color: var(--sidebar-active-bg) !important; color: var(--sidebar-active-text) !important; font-weight: 600; border-left: 2px solid var(--gold) !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
#sidebar nav a.bg-green-100 i,
#sidebar nav a[class*="bg-green"] i { color: var(--sidebar-active-icon) !important; }

#sidebar nav .pl-4 a { color: var(--sidebar-text) !important; font-size: 13px; opacity: .75; }
#sidebar nav .pl-4 a:hover { opacity: 1; color: var(--sidebar-text-hover) !important; background-color: rgba(255,255,255,0.05) !important; }

#sidebar nav button span { color: var(--sidebar-text) !important; }
#sidebar .toggle-arrow { color: var(--sidebar-icon) !important; transition: color .2s, transform .3s; }
#sidebar nav button:hover .toggle-arrow { color: var(--sidebar-icon-hover) !important; }
#sidebar .border-t { border-top-color: var(--sidebar-border) !important; }
#sidebar small { color: rgba(148,163,184,0.5) !important; }
#sidebar .opacity-80 { opacity: .65; }
#sidebar .opacity-80:hover { opacity: .9; }


/* ============================================================
   8. HOME / MAIN SECTION
   ============================================================ */

.home-section { position: relative; background: var(--bg); min-height: 100%; width: calc(100% - 260px); transition: all .5s ease; }
.sidebar.close ~ .home-section { width: calc(100% - 78px); }

.home-section .home-content { height: 60px; display: flex; align-items: center; position: fixed; top: 0; width: 100%; background: var(--card); box-shadow: 0 1px 0 var(--border); z-index: 40; }
.home-section .home-content .bx-menu,
.home-section .home-content .text { color: var(--ink); font-size: 35px; }
.home-section .home-content .bx-menu { margin: 0 15px; cursor: pointer; }
.home-section .home-content .text { font-size: 22px; font-weight: 700; font-family: var(--font-display); }
.navbar { box-shadow: 1.5px 0 6px rgba(59,124,255,0.1); }

/* Tailwind bg overrides */
#main-content main,
#main-content main.bg-gray-50,
#main-content .bg-gray-50,
#main-content .bg-gray-100,
.bg-gray-50 { background-color: var(--bg) !important; }

#container_content,
#container_target,
#container_list_target,
#container_form_target { background-color: var(--bg); }


/* ============================================================
   9. NAVBAR
   ============================================================ */

header.bg-white { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--navbar-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }
#mobile-menu-btn i, #sidebar-toggle i { color: var(--ink-mid) !important; }

.btn.btn-outline-primary { border-color: var(--border) !important; color: var(--ink-mid) !important; background: transparent !important; }
.btn.btn-outline-primary:hover { background-color: rgba(201,168,76,.08) !important; border-color: var(--gold) !important; color: var(--ink) !important; }

#project_mobile .btn-primary { background: var(--ink-mid) !important; border-color: var(--ink-mid) !important; color: #fff !important; }
.bg-blue-600.rounded-full { background-color: var(--ink-mid) !important; border: 2px solid var(--gold) !important; }

header .text-gray-700 { color: var(--navbar-text) !important; }
header .text-gray-500 { color: var(--muted) !important; }
#user-menu { border-color: var(--border) !important; box-shadow: 0 8px 24px rgba(11,17,32,.12) !important; }
#user-menu .border-b { border-bottom-color: var(--border) !important; }
#user-menu button:hover { background-color: rgba(201,168,76,.08) !important; color: var(--ink) !important; }
.bread-crumb { color: var(--muted) !important; font-size: 13px; }


/* ============================================================
   10. SEARCH BAR
   ============================================================ */

.search input[type="text"] { width: 100%; border: 1px solid #eef1f3; background-color: #eef1f3; border-radius: 15px; margin: 8px 0; outline: none; padding: 3px; transition: .3s; font-family: var(--font-body); }
.search input[type="text"]:focus { border-color: #eef1f3; box-shadow: none !important; }
.search .inputWithIcon input[type="text"] { padding-left: 40px; }
.search .inputWithIcon { position: relative; margin-left: 50px; }
.search .inputWithIcon i { position: absolute; left: 0; top: 4px; padding: 9px 8px; color: #aaa; transition: .3s; cursor: pointer; }
.search .inputWithIcon input[type="text"]:focus + i { color: dodgerblue; }


/* ============================================================
   11. BUTTONS
   ============================================================ */

.main_btn, .add_main_btn, .add_classic_btn, .go_btn { border: none; padding: 10px 15px; text-align: center; text-decoration: none; display: inline-block; font-family: var(--font-body); font-weight: 500; font-size: 14px; cursor: pointer; transition: opacity .2s, transform .1s; }
.add_main_btn { border-radius: 50px; color: #fff; background: var(--accent-grad); }
.add_classic_btn { border-radius: var(--radius-sm); white-space: nowrap; color: #fff; background: var(--accent-grad); }
.go_btn { background: linear-gradient(180.38deg, #fff 0.33%, #f8f9ff 99.67%); border: 1px solid #ded4fe; box-shadow: 0 10px 20px -9px rgba(50,77,171,0.25); border-radius: var(--radius-sm); padding: .375rem 2.25rem !important; color: #753cef; width: 100%; }
.add_main_btn:hover, .add_classic_btn:hover { opacity: .9; }

.btn-primary-dark { display: inline-block; padding: 12px 24px; background: var(--ink); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .18s, transform .1s; position: relative; overflow: hidden; }
.btn-primary-dark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(201,168,76,.15), transparent); transform: translateX(-100%); transition: transform .4s; }
.btn-primary-dark:hover { background: var(--ink-mid); color: #fff; }
.btn-primary-dark:hover::after { transform: translateX(100%); }
.btn-primary-dark:active { transform: scale(.99); }


/* ============================================================
   12. STATUS PILLS
   ============================================================ */

.inactive_btn { background: #fbd8d8; border-radius: 20px; display: inline-block; font-weight: 600; font-size: 13px; color: #ec4e50; padding: 4px 10px; }
.active_btn   { background: #bbf3e0; border-radius: 20px; display: inline-block; font-weight: 600; font-size: 13px; color: #1ad598; padding: 4px 10px; }


/* ============================================================
   13. TABLES
   ============================================================ */

.mark_entry_table { overflow-y: auto; }
.mark_entry_table table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.mark_entry_table th { background: var(--accent-grad); box-shadow: 0 4px 4px rgba(0,0,0,0.04); padding: 10px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .03em; }
.mark_entry_table td { background: var(--card); padding: 8px; font-family: var(--font-body); font-size: 13px; }
.mark_entry_table th:first-child { border-bottom-left-radius: var(--radius-sm); border-top-left-radius: var(--radius-sm); }
.mark_entry_table th:last-child  { border-bottom-right-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.mark_entry_table td:first-child { border-bottom-left-radius: var(--radius-sm); border-top-left-radius: var(--radius-sm); }
.mark_entry_table td:last-child  { border-bottom-right-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }

.semester_td_main, .s1_td_bg, .s2_td_bg, .s3_td_bg, .s4_td_bg, .s5_td_bg, .s6_td_bg, .s7_td_bg, .s8_td_bg { border-radius: var(--radius-sm); height: 50px; width: 80px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; }
.s1_td_bg { background: rgba(33,126,253,.3); color: #217efd; }
.s2_td_bg { background: #ffe9c3; color: #ffb536; }
.s3_td_bg { background: #f4cefa; color: #dc62ef; }
.s4_td_bg { background: #aafffe; color: #1abfbe; }
.s5_td_bg { background: rgba(249,242,95,.3); color: #d6cf43; }
.s6_td_bg { background: #aaffe3; color: #2bc090; }
.s7_td_bg { background: rgba(255,134,170,.3); color: #ff6594; }
.s8_td_bg { background: #dccefb; color: #895bf1; }

.mark_pass { font-weight: 500; font-size: 15px; color: #12175d; }
.mark_fail { font-weight: 500; font-size: 15px; color: #f72557; }
.attendance_pass { font-weight: 500; font-size: 15px; color: #1ad598; }
.attendance_fail { font-weight: 500; font-size: 15px; color: #f61e52; }


/* ============================================================
   14. MODALS + OVERLAYS
   ============================================================ */

.modal-content { background-color: var(--bg) !important; border-radius: var(--radius); }
.modal-header { border-bottom: none !important; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.modal-footer { border-top: none !important; border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.modal-title { font-family: var(--font-display); font-weight: 700; color: var(--ink) !important; }
.modal-body label { font-weight: 500; font-size: 13px; color: var(--ink-mid); margin-bottom: 5px; }

#overlay         { background-color: rgba(11,17,32,.6) !important; }
#modal-overlay   { background-color: rgba(11,17,32,.55) !important; }
#sidebar-overlay { background-color: rgba(11,17,32,.55) !important; }
#myModal .bg-white,
#myModal2 .bg-white { border-top: 3px solid var(--gold) !important; }


/* ============================================================
   15. FORM INPUTS
   ============================================================ */

input, select, textarea { font-family: var(--font-body); }
select:focus, input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(201,168,76,.12) !important; border-color: var(--gold) !important; outline: none; }
.form-control:focus { box-shadow: 0 0 0 3px rgba(201,168,76,.12) !important; border-color: var(--gold) !important; }


/* ============================================================
   16. NAV PILLS (Bootstrap)
   ============================================================ */

.nav-link { display: block; font-family: var(--font-body); font-weight: 500 !important; font-size: 14px !important; margin-right: 10px; margin-bottom: 5px; text-align: center; color: #b4bcc9 !important; background: linear-gradient(180.38deg, #fff 0.33%, #f8f9ff 99.67%) !important; box-shadow: 0 10px 20px -9px rgba(50,77,171,0.25) !important; border-radius: var(--radius-sm) !important; border: 1px solid #f8f9ff; transition: color .15s, background-color .15s, border-color .15s; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { font-weight: 600 !important; color: #753cef !important; background: linear-gradient(180.38deg, #fff 0.33%, #f8f9ff 99.67%) !important; border: 1px solid #ded4fe; box-shadow: 0 10px 20px -9px rgba(50,77,171,0.25) !important; border-radius: var(--radius-sm) !important; }
.nav-item button:focus { outline: 0 !important; }


/* ============================================================
   17. CHIPS
   ============================================================ */

.chip_main, .chip1, .chip2, .chip3, .chip4, .chip5, .chip6 { display: inline-block; padding: 3px 15px; font-size: 13px; border-radius: 25px; margin-bottom: 5px; font-family: var(--font-body); }
.closebtn_main, .closebtn1, .closebtn2, .closebtn3, .closebtn4, .closebtn5, .closebtn6 { padding-left: 10px; float: right; font-size: 22px; font-weight: 400; cursor: pointer; }
.chip1 { color: #e25050; background: #fbd8d8; } .closebtn1 { color: #e25050; }
.chip2 { color: #467d9f; background: #bee6ff; } .closebtn2 { color: #467d9f; }
.chip3 { color: #2fa67d; background: #bbf3e0; } .closebtn3 { color: #2fa67d; }
.chip4 { color: #429fa6; background: #a4f9ff; } .closebtn4 { color: #429fa6; }
.chip5 { color: #bf55d0; background: #f4cefa; } .closebtn5 { color: #bf55d0; }
.chip6 { color: #908e5e; background: #f9f25f; } .closebtn6 { color: #908e5e; }


/* ============================================================
   18. MISC UTILITIES
   ============================================================ */

.sub_name { font-weight: 500; font-size: 15px; color: #06152b; }
.sub_code { font-weight: 600; font-size: 15px; color: var(--accent); }
.not_mapped_txt { font-weight: 500; text-align: center; font-size: 17px; color: #bcb3e0; }
.fs_28_i { font-size: 28px; font-weight: 900; cursor: pointer; }
.mb_10 { margin-bottom: 10px; }
.std_det_sub1 { font-weight: 500; font-size: 15px; color: #06152b; padding-left: 8px; }
.std_det_sub2 { font-weight: 500; font-size: 15px; color: #b1a3fd; padding-left: 8px; }
.std_det_dp { border-radius: 50%; width: 50px; height: 50px; }
.add_exam_sub_1 { color: #a474fa; font-size: 13px; font-weight: 400; }
.add_exam_sub_2 { color: var(--ink); font-size: 13px; font-weight: 500; }
.adding_exam_mark_bg { background: var(--card); box-shadow: 0 2.67px 5.33px #d3dff7; border-radius: var(--radius); padding: 20px; margin-bottom: 15px; }
.error-block { color: var(--danger); font-size: 12px; margin-top: 4px; }

/* Tailwind colour pulls inside content containers */
#container_content .text-gray-600, #container_list_target .text-gray-600 { color: var(--muted) !important; }
#container_content .text-gray-800, #container_list_target .text-gray-800 { color: var(--text) !important; }
#container_content .text-gray-900, #container_list_target .text-gray-900 { color: var(--ink) !important; }
#container_content .border, #container_content .border-gray-200,
#container_list_target .border, #container_list_target .border-gray-200 { border-color: var(--border); }
#container_content .bg-white, #container_list_target .bg-white { background-color: var(--card) !important; border: 1px solid var(--border); border-radius: var(--radius); }


/* ============================================================
   19. DASHBOARD HEADER
   ============================================================ */

.dashboard { margin: 0 auto; padding: 0; font-family: var(--font-body); }

.header { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-mid) 100%); border-left: 4px solid var(--gold); color: #fff; padding: 24px; border-radius: var(--radius); margin-bottom: 24px; box-shadow: var(--shadow); }
.header h1 { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin-bottom: 4px; }
.header h2 { font-family: var(--font-body); font-weight: 400; font-size: .95rem; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.header p  { font-size: .85rem; color: var(--gold); opacity: 1; letter-spacing: .03em; }


/* ============================================================
   20. DASHBOARD TABS
   ============================================================ */

.tabs { display: flex; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; box-shadow: var(--shadow-sm); overflow: visible; }

.tab { flex: 1; padding: 13px 12px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; cursor: pointer; border-bottom: 3px solid transparent; color: var(--muted); transition: background .2s, color .2s; }

/* Active = ink + gold (no purple) */
.tab.active { background: var(--ink); color: var(--gold); border-bottom-color: var(--gold); }
.tab:hover:not(.active) { background-color: rgba(201,168,76,.06); color: var(--ink); }

.tab-content { display: none; }
.tab-content.active { display: block; }


/* ============================================================
   21. METRIC CARDS
   ============================================================ */

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }

.metric-card { background: var(--card); padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); border-top: 3px solid var(--gold); text-align: center; }

.metric-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--ink); }
.metric-label { font-size: 12px; color: var(--muted); margin-top: 4px; }


/* ============================================================
   22. CHARTS
   ============================================================ */

.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-bottom: 24px; }

.chart-container { background: var(--card); padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }

.chart-title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }

.chart-wrapper { height: 300px; }


/* ============================================================
   23. KANBAN
   ============================================================ */

.kanban-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.kanban-column { background: #f1f5f9; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; min-height: 500px; }
.column-header { font-family: var(--font-display); font-weight: 700; font-size: 12px; padding: 8px; text-align: center; border-radius: var(--radius-sm); margin-bottom: 10px; color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.backlog-header     { background: #6b7280; }
.todo-header        { background: var(--info); }
.in_progress-header { background: var(--warning); color: var(--ink); }
.in_review-header   { background: #f97316; }
.blocked-header     { background: var(--danger); }
.done-header        { background: var(--success); }

.task-card { background: var(--card); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--gold); }
.task-card.blocked { border-left-color: var(--danger); background: #fff8f8; }
.task-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); }
.task-meta  { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; margin-top: 5px; }
.task-assignee { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
.task-points   { background: var(--ink-mid); color: #fff; padding: 2px 6px; border-radius: 4px; }


/* ============================================================
   24. KPI DASHBOARD — Tailwind class overrides
   ============================================================ */

/* KPI card shell */
.grid > .bg-white.p-4.rounded.shadow { background: var(--card) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; border-top: 3px solid var(--gold); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-left: none !important; }
.grid > .bg-white.p-4.rounded.shadow.border-l-4.border-l-red-500 { border-left: 4px solid var(--danger) !important; border-top: 3px solid var(--danger) !important; }
.grid > .bg-red-50.p-4.rounded.shadow { background: #fff5f5 !important; border: 1px solid #fca5a5 !important; border-top: 3px solid var(--danger) !important; border-radius: var(--radius) !important; }

.bg-white.p-4.rounded.shadow .text-sm.text-gray-500,
.bg-white.p-4.rounded.shadow .text-gray-500 { font-size: 11.5px !important; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) !important; }
.bg-white.p-4.rounded.shadow .text-2xl.font-bold { font-family: var(--font-display) !important; font-size: 1.55rem !important; font-weight: 800 !important; }

/* Alert banners */
.bg-purple-50.border-l-4.border-l-purple-600 { background: #faf5ff !important; border-left-color: #7c3aed !important; border-radius: 0 var(--radius) var(--radius) 0 !important; box-shadow: var(--shadow-sm); }
.bg-red-100.border-l-4.border-l-red-700 { background: #fff1f1 !important; border-left-color: var(--danger) !important; border-radius: 0 var(--radius) var(--radius) 0 !important; box-shadow: var(--shadow-sm); }
.bg-purple-50 h4, .bg-red-100 h3 { font-family: var(--font-display) !important; font-weight: 700 !important; }

/* Sprint cards */
.grid > .bg-white.p-5.rounded.shadow { background: var(--card) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--border); }
.bg-white.p-5.rounded.shadow h4 { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 14.5px !important; color: var(--ink) !important; }
.bg-white.p-5.rounded.shadow .text-gray-600 { color: var(--muted) !important; font-size: 12px !important; font-weight: 500; }
.bg-white.p-5.rounded.shadow .bg-purple-100 { background: #f3e8ff !important; border-radius: var(--radius-sm); }
.bg-white.p-5.rounded.shadow .bg-red-200    { background: #fee2e2 !important; border-radius: var(--radius-sm); }
.bg-white.p-5.rounded.shadow .bg-red-100    { background: #fff1f1 !important; border-radius: var(--radius-sm); }
.bg-white.p-5.rounded.shadow .bg-orange-100 { background: #fff7ed !important; border-radius: var(--radius-sm); }
.bg-white.p-5.rounded.shadow .inline-flex.rounded.text-xs { font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; }

/* Audit table */
.bg-white.rounded-xl.shadow.overflow-hidden { background: var(--card) !important; border: 1px solid var(--border); border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.bg-gray-900.text-white.px-6.py-4 { background: var(--ink) !important; border-bottom: 2px solid var(--gold) !important; border-radius: var(--radius) var(--radius) 0 0; }
.bg-gray-900 h3 { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 15px !important; color: #fff !important; }
.bg-gray-900 .text-xs.text-gray-400 { color: rgba(201,168,76,.6) !important; }
.bg-gray-900 .bg-purple-800 { background: rgba(124,58,237,.9) !important; border: 1px solid rgba(167,139,250,.4); }
.bg-gray-900 .bg-red-700 { background: rgba(185,28,28,.9) !important; border: 1px solid rgba(252,165,165,.3); }
.bg-gray-900 .bg-red-800 { background: rgba(153,27,27,.9) !important; }

.w-full.text-sm thead tr { background: var(--bg) !important; border-bottom: 2px solid var(--border) !important; }
.w-full.text-sm thead th { font-family: var(--font-display) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--ink-mid) !important; padding: 10px 12px !important; }
.w-full.text-sm tbody tr { font-family: var(--font-body); font-size: 13px; transition: background .12s; }
.w-full.text-sm tbody tr.hover\:bg-gray-50:hover { background-color: rgba(201,168,76,.04) !important; }
.w-full.text-sm tbody tr.bg-purple-50 { background: #faf5ff !important; }
.w-full.text-sm tbody tr.bg-red-200   { background: #fee2e2 !important; }
.w-full.text-sm tbody tr.bg-red-50    { background: #fff5f5 !important; }
.w-full.text-sm tbody tr.bg-orange-50 { background: #fff8f0 !important; }
.w-full.text-sm tbody tr.bg-yellow-50 { background: #fefce8 !important; }
.w-full.text-sm tbody .inline-flex.rounded.text-xs { font-size: 11px !important; font-weight: 600 !important; }
.bg-gray-50.px-6.py-3.border-t { background: var(--bg) !important; border-top-color: var(--border) !important; font-size: 11.5px !important; color: var(--muted) !important; }

/* Chart wrappers */
.bg-white.rounded-xl.shadow.p-6 { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; }
.bg-white.rounded-xl.shadow.p-6 h3 { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 14px !important; color: var(--ink) !important; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px !important; }

/* Sprint headers + tooltip icons */
.sprint-header, [class*="sprint_header"] { background: var(--ink) !important; color: var(--gold) !important; border-radius: var(--radius-sm); padding: 10px 14px; }
[data-tooltip], .tooltip-trigger, .kpi-tooltip, [onclick*="tooltip"], .tooltip-icon { color: var(--muted); transition: color .15s; }
[data-tooltip]:hover, .tooltip-trigger:hover, .kpi-tooltip:hover, [onclick*="tooltip"]:hover, .tooltip-icon:hover { color: var(--gold); }


/* ============================================================
   25. LOGIN / REGISTER SHELL
   ============================================================ */

.shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.panel-left { background: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 52px 56px; position: relative; overflow: hidden; }
.panel-left::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.panel-left::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--gold), transparent 70%); }

.brand { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.brand-mark { width: 36px; height: 36px; background: var(--gold); border-radius: 4px; display: grid; place-items: center; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: .04em; text-transform: uppercase; }

.stat-row { display: flex; gap: 32px; position: relative; z-index: 1; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); margin: 40px 0; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-val { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--gold); line-height: 1; }
.stat-label { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.panel-copy { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--gold); }
.panel-heading { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 800; color: #fff; line-height: 1.18; margin-bottom: 24px; }
.panel-heading em { font-style: normal; color: var(--gold); }
.panel-desc { font-size: 14.5px; color: var(--muted); line-height: 1.75; max-width: 400px; margin-bottom: 32px; }
.feature-list { display: flex; flex-direction: column; gap: 10px; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: #c8d4e8; line-height: 1.5; }
.feature-icon { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid rgba(201,168,76,.4); border-radius: 3px; display: grid; place-items: center; margin-top: 1px; }
.feature-icon svg { width: 11px; height: 11px; color: var(--gold); }
.panel-footer { position: relative; z-index: 1; font-size: 11.5px; color: rgba(138,154,181,.5); letter-spacing: .02em; }

.panel-right { background: var(--sand); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 56px 48px; position: relative; overflow-y: auto; }
.panel-right::before { content: ''; position: absolute; top: 0; right: 0; width: 220px; height: 220px; background: radial-gradient(circle at top right, rgba(201,168,76,.08), transparent 70%); pointer-events: none; }

.form-shell { width: 100%; max-width: 400px; position: relative; z-index: 1; }
.form-shell.wide { max-width: 440px; }
.form-header { margin-bottom: 32px; }
.form-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dim); font-weight: 600; margin-bottom: 10px; }
.form-heading { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 8px; }
.form-sub { font-size: 13.5px; color: #6b7a94; line-height: 1.6; }

.field { margin-bottom: 18px; }
.field-wrap { margin-bottom: 16px; }
.field label, .field-wrap label { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 6px; }

.field input, .field-wrap input, .field-wrap select, .field-wrap textarea { width: 100%; padding: 11px 14px; background: #fff; border: 1.5px solid #dde3ec; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; color: var(--ink); transition: border-color .18s, box-shadow .18s; outline: none; appearance: none; }
.field input::placeholder, .field-wrap input::placeholder, .field-wrap textarea::placeholder { color: #aab4c5; font-size: 13px; }
.field input:focus, .field-wrap input:focus, .field-wrap select:focus, .field-wrap textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.12); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.forgot-link { font-size: 12.5px; color: var(--gold-dim); text-decoration: none; font-weight: 500; }
.forgot-link:hover { color: var(--gold); text-decoration: underline; }

.btn-signin, .btn-register { width: 100%; padding: 13px; background: var(--ink); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: background .18s, transform .1s; position: relative; overflow: hidden; }
.btn-signin::after, .btn-register::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(201,168,76,.15), transparent); transform: translateX(-100%); transition: transform .4s; }
.btn-signin:hover, .btn-register:hover { background: var(--ink-mid); }
.btn-signin:hover::after, .btn-register:hover::after { transform: translateX(100%); }
.btn-signin:active, .btn-register:active { transform: scale(.99); }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #aab4c5; font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #dde3ec; }
.btn-demo { width: 100%; padding: 11px; background: transparent; color: var(--ink-mid); border: 1.5px solid #c8d0dc; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color .18s, color .18s; }
.btn-demo:hover { border-color: var(--gold); color: var(--gold-dim); }

.signin-link { text-align: center; margin-top: 18px; font-size: 13px; color: #6b7a94; }
.signin-link a { color: var(--gold-dim); font-weight: 500; }
.signin-link a:hover { color: var(--gold); text-decoration: underline; }
.powered-by { margin-top: 36px; padding-top: 20px; border-top: 1px solid #e2e7ef; text-align: center; }
.powered-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #9aa5b8; }

.error-alert { background: #fff5f5; border: 1.5px solid #fca5a5; border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; font-size: 13px; color: var(--danger); transition: opacity .5s ease, transform .5s ease; }
.error-alert strong { display: block; margin-bottom: 6px; font-size: 13px; color: #c0392b; }
.error-alert ul { padding-left: 16px; margin: 0; }
.error-alert li { margin-bottom: 2px; }


/* ============================================================
   26. PRINT
   ============================================================ */

@media print {
  body { background: #fff; }
  .header, .tabs, .kanban-board, .charts-grid { display: none !important; }
  .dashboard { padding: 0; max-width: 100%; }
}


/* ============================================================
   27. RESPONSIVE
   ============================================================ */

@media only screen and (max-width: 480px) {
  .logo-details .logo_name { display: none; }
  .dp_nav_name { display: none; }
  .main_content_m70 { margin-top: 70px; padding: 10px; }
  .inputWithIcon { display: none; }
  .kanban-board { grid-template-columns: 1fr; }
  .charts-grid  { grid-template-columns: 1fr; }
  .field-row    { grid-template-columns: 1fr; }
}

@media only screen and (min-width: 768px) {
  .logo-details .logo_name { font-size: 20px; font-weight: 700; transition: .3s ease; transition-delay: .1s; white-space: nowrap; }
  .main_content_m70 { margin-top: 70px; padding: 15px; }
}

@media only screen and (min-width: 992px) {
  .main_content_m70 { margin-top: 70px; padding: 15px 30px; }
}

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .panel-left { display: none; }
  .panel-right { padding: 40px 24px; min-height: 100vh; }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .sidebar.close.small-screen { width: 0; }
  .sidebar.close.small-screen ~ .home-section { width: 100%; left: 0; z-index: 100; }
}


/* ============================================================
   28. ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.form-shell   { animation: fadeUp .5s ease both; }
.form-header  { animation: fadeUp .5s .08s ease both; }
.field-wrap:nth-child(1) { animation: fadeUp .4s .10s ease both; }
.field-wrap:nth-child(2) { animation: fadeUp .4s .14s ease both; }
.field-wrap:nth-child(3) { animation: fadeUp .4s .18s ease both; }
.field-wrap:nth-child(4) { animation: fadeUp .4s .22s ease both; }
.field-row    { animation: fadeUp .4s .26s ease both; }
.btn-signin, .btn-register { animation: fadeUp .4s .30s ease both; }
.panel-copy   { animation: slideIn .6s .1s ease both; }
.stat-row     { animation: slideIn .6s .2s ease both; }
.feature-list { animation: slideIn .6s .3s ease both; }