/* ===================================================================
   WEBUTHINK Employee Dashboard — Theme System
   Brand colors derived from WEBUTHINK logo:
   Navy (wordmark) + Orange (services) + Teal/Pink (brain icon accents)
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand palette */
  --brand-navy:        #16213e;
  --brand-navy-dark:   #0d1526;
  --brand-navy-light:  #1f2d52;
  --brand-orange:      #f7941d;
  --brand-orange-dark: #d97c0a;
  --brand-teal:        #00b8a9;
  --brand-pink:        #ef5f8f;

  /* Semantic tokens (light mode) */
  --bg-page:      #f3f5f9;
  --bg-surface:   #ffffff;
  --bg-sidebar:   var(--brand-navy);
  --bg-sidebar-active: var(--brand-navy-light);
  --text-primary: #1c1f2a;
  --text-muted:   #6b7280;
  --text-on-sidebar: #c9d3e6;
  --border-color: #e7eaf0;
  --accent:       var(--brand-orange);
  --accent-2:     var(--brand-teal);
  --success:      #1e9e6a;
  --warning:      #f5a623;
  --danger:       #e35d6a;
  --info:         var(--brand-teal);
  --shadow-sm:    0 4px 16px rgba(22,33,62,0.07);
  --shadow-md:    0 12px 34px rgba(22,33,62,0.12);
  --radius:       8px;
  --radius-sm:    7px;
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  --sidebar-w:    260px;
}

[data-theme="dark"]{
  --bg-page:      #11141d;
  --bg-surface:   #181c27;
  --bg-sidebar:   #0c0f17;
  --bg-sidebar-active: #1c2333;
  --text-primary: #e7eaf3;
  --text-muted:   #99a2b8;
  --text-on-sidebar: #aab3c9;
  --border-color: #262c3d;
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:    0 10px 30px rgba(0,0,0,0.45);
}

/* ---------- base ---------- */
html, body{
  background: var(--bg-page) !important;
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: background .25s ease, color .25s ease;
}
h1,h2,h3,h4,h5,h6, .navbar-brand, .brand{ font-family: var(--font-display); }
a{ color: var(--accent); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: rgba(127,127,127,.35); border-radius:8px; }

/* ---------- sidebar (shared shell across admin/employee/dashboard) ---------- */
.sidebar, .admin-sidebar, .app-sidebar{
  background: var(--bg-sidebar) !important;
  width: var(--sidebar-w) !important;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  overflow-y: auto;
  z-index: 100;
  transition: transform .25s ease, background .25s ease;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.sidebar .brand, .admin-sidebar .brand, .app-sidebar .brand{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .3px;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  display:flex; align-items:center; gap:8px;
}
.sidebar a, .admin-sidebar a, .app-sidebar a{
  display: block;
  width: calc(100% - 10px);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-on-sidebar) !important;
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 14px 14px 0;
  margin: 2px 12px 2px 0;
}
.sidebar a:hover, .admin-sidebar a:hover, .app-sidebar a:hover{
  background: var(--bg-sidebar-active) !important;
  color: #fff !important;
}
.sidebar a.active, .admin-sidebar a.active, .app-sidebar a.active{
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-dark)) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.sidebar .section-label, .admin-sidebar .section-label{
  color: #5d6a8a !important;
}
.badge-pending{ background: var(--brand-orange) !important; color:#1c1200 !important; font-weight:700; }

/* ---------- main content shell ---------- */
.content, .admin-content, .main-content{
  margin-left: var(--sidebar-w) !important;
  transition: margin-left .25s ease;
}
.topbar{
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary);
}
.topbar .text-muted{ color: var(--text-muted) !important; }

/* ---------- cards ---------- */
.card{
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
}
.card-header{ border-radius: var(--radius) var(--radius) 0 0 !important; font-family: var(--font-display); font-weight:600; }
.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.container, .container-fluid{ max-width: 1320px; }

/* stat tiles — replace inline gradients with brand-consistent set */
.stat-tile{
  border:0; border-radius: var(--radius); color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--shadow-md);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.stat-tile .card-body{ display:flex; flex-direction:column; justify-content:center; flex:1; }
.stat-tile::after{
  content:""; position:absolute; right:-20px; top:-20px; width:100px; height:100px;
  background: rgba(255,255,255,.10); border-radius:50%;
}
.stat-tile .stat-icon{ font-size:1.6rem; opacity:.9; }
.stat-tile .stat-value{ font-family: var(--font-display); font-weight:800; font-size:1.9rem; }
.stat-tile .stat-label{ font-size:.82rem; opacity:.85; text-transform:uppercase; letter-spacing:.5px; }
.tile-navy{ background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-dark)); }
.tile-orange{ background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark)); }
.tile-teal{ background: linear-gradient(135deg, var(--brand-teal), #00897e); }
.tile-pink{ background: linear-gradient(135deg, var(--brand-pink), #c8456f); }

/* ---------- tables ---------- */
.table{ color: var(--text-primary); }
.table thead th{
  background: var(--bg-page);
  font-family: var(--font-display);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color) !important;
}
.table td, .table th{ border-color: var(--border-color) !important; vertical-align: middle; }
.table-hover tbody tr:hover{ background: rgba(247,148,29,0.06); }
.table-responsive{ border-radius: var(--radius); }
[data-theme="dark"] .table-light, [data-theme="dark"] thead.table-light{ background: var(--bg-page) !important; color: var(--text-primary); }

/* Bootstrap's text-muted/text-secondary/text-dark/table-dark utilities are hardcoded
   and unreadable on dark surfaces — make them theme-aware */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary{ color: var(--text-muted) !important; }
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body{ color: var(--text-primary) !important; }
[data-theme="dark"] .bg-white{ background: var(--bg-surface) !important; }
[data-theme="dark"] .bg-light{ background: var(--bg-page) !important; }
[data-theme="dark"] .table-dark{ --bs-table-bg: var(--brand-navy-dark); }
[data-theme="dark"] .border{ border-color: var(--border-color) !important; }
[data-theme="dark"] .modal-content{ background: var(--bg-surface); color: var(--text-primary); }
[data-theme="dark"] .dropdown-menu{ background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .dropdown-item{ color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover{ background: var(--bg-page); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{ color: #6b7488; }
[data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled{ background: var(--bg-page); color: var(--text-muted); }

/* ---------- buttons ---------- */
.btn{ border-radius: var(--radius-sm); font-weight:600; font-family: var(--font-body); }
.btn-primary, .btn-success.btn-brand{
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-dark));
  border:none;
}
.btn-dark{ background: var(--brand-navy); border-color: var(--brand-navy); }
.btn-outline-brand{ border:1.5px solid var(--brand-orange); color: var(--brand-orange); background:transparent; }
.btn-outline-brand:hover{ background: var(--brand-orange); color:#fff; }

/* ---------- form controls (dark mode aware) ---------- */
.form-control, .form-select{
  background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-orange); box-shadow: 0 0 0 .2rem rgba(247,148,29,.18);
}

/* ---------- alerts ---------- */
.alert{ border-radius: var(--radius-sm); border:1px solid var(--border-color); }

/* ---------- top utility bar items: hamburger / theme toggle / notif bell ---------- */
.icon-btn{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: var(--bg-page); border:1px solid var(--border-color); color: var(--text-primary); cursor:pointer;
  transition: all .2s ease;
}
.icon-btn:hover{ background: var(--brand-orange); color:#fff; border-color: var(--brand-orange); }
#sidebarToggleBtn{ display:none; }

.notif-dot{
  position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%;
  background: var(--danger); border:2px solid var(--bg-surface);
}
.notif-panel{
  position:absolute; right:0; top:48px; width:320px; max-height:380px; overflow:auto;
  background: var(--bg-surface); border:1px solid var(--border-color); border-radius: var(--radius);
  box-shadow: var(--shadow-md); z-index:200; display:none;
}
.notif-panel.show{ display:block; }
.notif-item{ padding:12px 16px; border-bottom:1px solid var(--border-color); display:block; color:var(--text-primary); text-decoration:none; }
.notif-item:hover{ background: var(--bg-page); }
.notif-item small{ color: var(--text-muted); }
.notif-empty{ padding:24px; text-align:center; color: var(--text-muted); }

/* ---------- info tiles (clock-in/out style soft boxes, theme-aware) ---------- */
.info-tile{ border-radius: var(--radius-sm); transition: background .25s ease; }
.info-tile-green{ background:#e8f5e9; }
.info-tile-orange{ background:#fff3e0; }
.info-tile-blue{ background:#e3f2fd; }
.info-tile-red{ background:#ffebee; }
[data-theme="dark"] .info-tile-green{ background: rgba(0,184,169,0.14); }
[data-theme="dark"] .info-tile-orange{ background: rgba(247,148,29,0.14); }
[data-theme="dark"] .info-tile-blue{ background: rgba(56,140,255,0.14); }
[data-theme="dark"] .info-tile-red{ background: rgba(239,95,143,0.14); }
[data-theme="dark"] .info-tile .text-muted{ color: var(--text-muted) !important; }

/* ---------- chart card ---------- */
.chart-card{ background: var(--bg-surface); border-radius: var(--radius); border:1px solid var(--border-color); padding:18px; box-shadow: var(--shadow-sm); }

/* ---------- mobile / tablet responsive ---------- */
@media (max-width: 991.98px){
  .sidebar, .admin-sidebar, .app-sidebar{
    position: fixed; top:0; left:0; height:100vh; z-index: 1050;
    transform: translateX(-100%);
  }
  .sidebar.show, .admin-sidebar.show, .app-sidebar.show{ transform: translateX(0); }
  .content, .admin-content, .main-content{ margin-left: 0 !important; padding: 16px !important; }
  #sidebarToggleBtn{ display:inline-flex; }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1040;
  }
  .sidebar-backdrop.show{ display:block; }
  .topbar{ flex-wrap: wrap; gap:10px; }
  .stat-tile .stat-value{ font-size:1.5rem; }
  table.table-responsive-stack thead{ display:none; }
}

@media (max-width: 575.98px){
  .content, .admin-content, .main-content{ padding: 12px !important; }
  .card-body{ padding: 1rem !important; }
  .topbar{ padding: 12px !important; }
  .notif-panel{ width: 92vw; right: -10px; }
}

/* utility */
.text-brand{ color: var(--brand-orange) !important; }
.bg-brand-navy{ background: var(--brand-navy) !important; }
.topbar {
    border-radius: var(--radius) !important;
    margin-bottom: 25px;
    padding: 12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}    

.content{
  padding: 0px 10px;
}
.main-content{
   padding: 0px 15px;
}
.brand {
    color: #fff;
}