/* =========================================================
   CORPORATE INTRANET — Blue Corporate Theme
   Sidebar + TopBar + Card-Widget Dashboard
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --primary:#0B3D6B;
  --primary-dark:#072D50;
  --primary-light:#1565C0;
  --primary-50:#E3F2FD;
  --accent:#1E88E5;
  --accent-light:#BBDEFB;
  --sidebar-bg:#0B3D6B;
  --sidebar-w:230px;
  --topbar-h:52px;
  --gray-50:#F8FAFC;--gray-100:#F1F5F9;--gray-200:#E2E8F0;--gray-300:#CBD5E1;
  --gray-400:#94A3B8;--gray-500:#64748B;--gray-600:#475569;--gray-700:#334155;
  --gray-800:#1E293B;--gray-900:#0F172A;
  --success:#16A34A;--success-light:#DCFCE7;
  --warning:#D97706;--warning-light:#FEF3C7;
  --danger:#DC2626;--danger-light:#FEE2E2;
  --info:#0284C7;--info-light:#E0F2FE;
  --radius:6px;--radius-lg:10px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;line-height:1.5;color:var(--gray-800);background:#ECF0F5}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--primary-light)}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:13px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}

/* ============ TOP BAR ============ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  height:var(--topbar-h);
  background:linear-gradient(135deg,#0B3D6B 0%,#1565C0 100%);
  display:flex;align-items:center;
  padding:0 16px;gap:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:200px}
.sidebar-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:6px;cursor:pointer}
.sidebar-toggle span{width:18px;height:2px;background:#fff;border-radius:1px}
.topbar-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.topbar-logo-img{height:42px;width:auto;border-radius:4px;object-fit:contain;filter:brightness(0) invert(1)}
.topbar-logo-icon{width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;letter-spacing:-0.5px}
.topbar-logo-text{color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
.topbar-center{flex:1;display:flex;justify-content:center;max-width:520px;margin:0 auto}
.topbar-search{position:relative;width:100%}
.topbar-search input{width:100%;height:32px;padding:0 12px 0 34px;border:none;border-radius:4px;background:rgba(255,255,255,.2);color:#fff;font-size:12px;outline:none;transition:background .2s}
.topbar-search input::placeholder{color:rgba(255,255,255,.6)}
.topbar-search input:focus{background:rgba(255,255,255,.3)}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.6);pointer-events:none}
.topbar-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.topbar-icon-btn{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:rgba(255,255,255,.8);transition:background .2s}
.topbar-icon-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.topbar-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;background:#E53935;color:#fff;font-size:10px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--primary)}
.topbar-user{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--radius);cursor:default}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid rgba(255,255,255,.4)}
.topbar-user-info{display:flex;flex-direction:column;line-height:1.2}
.topbar-user-name{color:#fff;font-size:12px;font-weight:600}
.topbar-user-role{color:rgba(255,255,255,.6);font-size:10px}
.topbar-logout{background:none;border:none;color:rgba(255,255,255,.6);padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.topbar-logout:hover{background:rgba(255,255,255,.15);color:#fff}
.topbar-login-btn{color:#fff;background:rgba(255,255,255,.15);padding:5px 16px;border-radius:4px;font-size:12px;font-weight:600;transition:background .2s}
.topbar-login-btn:hover{background:rgba(255,255,255,.25);color:#fff}

/* ============ SIDEBAR ============ */
.sidebar{
  position:fixed;top:var(--topbar-h);left:0;bottom:0;
  width:var(--sidebar-w);z-index:1000;
  background:var(--sidebar-bg);
  overflow-y:auto;overflow-x:hidden;
  transition:transform .25s var(--ease);
}
.sidebar-nav{padding:8px 0}
.sidebar-section{padding:6px 0}
.sidebar-section-title{padding:10px 16px 4px;font-size:10px;font-weight:700;letter-spacing:.8px;color:rgba(255,255,255,.4);text-transform:uppercase}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:7px 16px;color:rgba(255,255,255,.75);font-size:12.5px;font-weight:500;transition:all .15s var(--ease);border-left:3px solid transparent;text-decoration:none}
.sidebar-link:hover{background:rgba(255,255,255,.08);color:#fff;border-left-color:rgba(255,255,255,.3)}
.sidebar-link.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:#4FC3F7;font-weight:600}
.sidebar-link svg{flex-shrink:0;opacity:.7}
.sidebar-link.active svg,.sidebar-link:hover svg{opacity:1}
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.4)}
.sidebar-overlay.active{display:block}

/* ============ MAIN CONTENT ============ */
.main-content{
  margin-left:var(--sidebar-w);
  margin-top:var(--topbar-h);
  min-height:calc(100vh - var(--topbar-h));
  padding:16px;
}
.footer{
  margin-left:var(--sidebar-w);
  padding:12px 16px;
  text-align:center;
  font-size:11px;color:var(--gray-400);
  border-top:1px solid var(--gray-200);
  background:#fff;
}

/* ============ WIDGET CARD (like the screenshot) ============ */
.wcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.wcard-header{
  background:var(--primary);
  color:#fff;padding:8px 14px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;font-weight:600;
  min-height:34px;
}
.wcard-header a,.wcard-header .wcard-more{color:rgba(255,255,255,.7);font-size:11px;font-weight:500;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:4px}
.wcard-header a:hover,.wcard-header .wcard-more:hover{color:#fff}
.wcard-body{padding:14px;flex:1}
.wcard-body-np{padding:0;flex:1}

/* ============ DASHBOARD GRID ============ */
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dash-col-span2{grid-column:span 2}
.dash-col-span3{grid-column:span 3}
.dash-col-span4{grid-column:span 4}

/* ============ NEWS SLIDER ============ */
.news-slider{position:relative;border-radius:var(--radius);overflow:hidden;height:220px;background:var(--primary-dark)}
.news-slider-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.news-slider-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:16px 20px;color:#fff}
.news-slider-title{font-size:15px;font-weight:700;margin-bottom:4px}
.news-slider-desc{font-size:12px;opacity:.85}
.slider-nav{position:absolute;bottom:12px;right:16px;display:flex;gap:6px}
.slider-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;border:none}
.slider-dot.active{background:#fff}

/* ============ ANNOUNCEMENTS ============ */
.ann-item{padding:10px 0;border-bottom:1px solid var(--gray-100)}
.ann-item:last-child{border-bottom:none}
.ann-date{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:2px}
.ann-title{font-size:12.5px;font-weight:500;color:var(--gray-800);line-height:1.4}

/* ============ CALENDAR WIDGET ============ */
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cal-title{font-size:13px;font-weight:700;color:var(--primary)}
.cal-nav{display:flex;gap:4px}
.cal-nav button{width:22px;height:22px;border:1px solid var(--gray-200);background:#fff;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--gray-600)}
.cal-nav button:hover{background:var(--gray-50)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center;font-size:11px}
.cal-dow{font-weight:600;color:var(--gray-500);padding:3px 0;font-size:10px}
.cal-day{padding:3px 0;border-radius:3px;cursor:pointer;color:var(--gray-600);font-weight:500}
.cal-day:hover{background:var(--primary-50)}
.cal-day.today{background:var(--accent);color:#fff;font-weight:700;border-radius:50%}
.cal-day.has-event{color:var(--accent);font-weight:700}
.cal-day.other-month{color:var(--gray-300)}

/* ============ DIRECTORY SEARCH WIDGET ============ */
.dir-search-form{display:flex;flex-direction:column;gap:8px}
.dir-search-form input,.dir-search-form select{height:30px;border:1px solid var(--gray-200);border-radius:4px;padding:0 8px;font-size:12px;outline:none}
.dir-search-form input:focus,.dir-search-form select:focus{border-color:var(--accent)}
.dir-actions{display:flex;gap:6px;margin-top:4px}
.dir-contact{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--gray-100);margin-top:8px;font-size:11px;color:var(--gray-600)}
.dir-contact svg{color:var(--accent);flex-shrink:0}

/* ============ PERSONNEL SUGGESTIONS (Personel Önerileri) ============ */
.pers-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--gray-100)}
.pers-item:last-child{border-bottom:none}
.pers-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.pers-icon.blue{background:#E3F2FD;color:#1565C0}
.pers-icon.green{background:#E8F5E9;color:#2E7D32}
.pers-icon.orange{background:#FFF3E0;color:#E65100}
.pers-icon.purple{background:#F3E5F5;color:#7B1FA2}
.pers-info{flex:1;min-width:0}
.pers-name{font-size:12px;font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pers-dept{font-size:10.5px;color:var(--gray-400)}
.pers-badges{display:flex;gap:4px}
.pers-badge{min-width:22px;height:18px;border-radius:9px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px}
.pers-badge.red{background:#FFEBEE;color:#C62828}
.pers-badge.green{background:#E8F5E9;color:#2E7D32}
.pers-badge.blue{background:#E3F2FD;color:#1565C0}

/* ============ BIRTHDAY & NEW EMPLOYEE CARDS ============ */
.bday-card,.newjoin-card{text-align:center;padding:12px 8px}
.bday-avatar,.newjoin-avatar{width:56px;height:56px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff}
.bday-avatar{background:linear-gradient(135deg,#42A5F5,#1E88E5);border:3px solid #BBDEFB}
.newjoin-avatar{background:linear-gradient(135deg,#66BB6A,#43A047);border:3px solid #C8E6C9}
.bday-name,.newjoin-name{font-size:12px;font-weight:700;color:var(--gray-800);margin-bottom:2px}
.bday-msg,.newjoin-msg{font-size:10.5px;color:var(--gray-500);line-height:1.3}
.bday-scroll,.newjoin-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 0}
.bday-scroll::-webkit-scrollbar,.newjoin-scroll::-webkit-scrollbar{height:3px}

/* ============ WEATHER WIDGET ============ */
.weather-compact{display:flex;align-items:center;gap:12px;padding:4px 0}
.weather-icon-lg{font-size:40px;line-height:1}
.weather-main{flex:1}
.weather-temp-big{font-size:32px;font-weight:800;color:var(--gray-900);line-height:1}
.weather-temp-big sup{font-size:14px;font-weight:500}
.weather-city-name{font-size:11px;color:var(--gray-500)}
.weather-desc-text{font-size:11px;color:var(--accent);font-weight:500}
.weather-mini-forecast{display:flex;gap:8px;margin-top:8px;justify-content:space-between}
.weather-mini-day{text-align:center;font-size:10px;color:var(--gray-500)}
.weather-mini-day .temp{font-weight:700;color:var(--gray-700);font-size:11px}
.weather-mini-day .icon{font-size:16px}
.weather-location{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--gray-400);margin-top:6px}

/* ============ EXCHANGE RATES ============ */
.exc-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--gray-100)}
.exc-row:last-child{border-bottom:none}
.exc-pair{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.exc-flag{font-size:14px}
.exc-rate{font-size:13px;font-weight:700;color:var(--primary)}

/* ============ CLOCK WIDGET ============ */
.clock-box{text-align:center;padding:8px 0}
.clock-big{font-size:28px;font-weight:800;color:var(--gray-900);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.clock-date-text{font-size:11px;color:var(--gray-500);margin-top:2px}

/* ============ BULLETINS ============ */
.bul-item{display:flex;align-items:start;gap:8px;padding:7px 0;border-bottom:1px solid var(--gray-100);cursor:pointer}
.bul-item:last-child{border-bottom:none}
.bul-item:hover .bul-title{color:var(--accent)}
.bul-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.bul-title{font-size:12px;font-weight:500;color:var(--gray-700);line-height:1.4}
.bul-meta{font-size:10px;color:var(--gray-400);margin-top:1px}

/* ============ QUICK ACTIONS ============ */
.qa-grid{display:flex;gap:8px;flex-wrap:wrap}
.qa-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:4px;font-size:11.5px;font-weight:600;background:#fff;border:1px solid var(--gray-200);color:var(--gray-700);transition:all .15s;text-decoration:none}
.qa-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--primary-50)}
.qa-btn svg{width:14px;height:14px}
.qa-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.qa-btn.primary:hover{background:var(--primary-light)}

/* ============ PENDING TASKS ============ */
.task-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--gray-100);text-decoration:none}
.task-row:last-child{border-bottom:none}
.task-row:hover .task-text{color:var(--accent)}
.task-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.task-dot.amber{background:var(--warning)}
.task-dot.green{background:var(--success)}
.task-dot.blue{background:var(--info)}
.task-dot.red{background:var(--danger)}
.task-text{font-size:12px;color:var(--gray-700);font-weight:500;flex:1}
.task-count{font-size:11px;font-weight:700;color:var(--gray-500);background:var(--gray-100);padding:1px 8px;border-radius:10px}

/* ============ MENU WIDGET ============ */
.menu-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--gray-100)}
.menu-row:last-child{border-bottom:none}
.menu-emoji{font-size:16px;flex-shrink:0}
.menu-info{flex:1}
.menu-label{font-size:10px;color:var(--gray-400);text-transform:uppercase;font-weight:600}
.menu-value{font-size:12px;color:var(--gray-700);font-weight:500}

/* ============ DEPARTMENT LIST ============ */
.dept-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--gray-100);font-size:12px}
.dept-row:last-child{border-bottom:none}
.dept-name{color:var(--gray-700);font-weight:500}
.dept-count{font-size:11px;font-weight:700;color:var(--accent)}

/* ============ MODULES GRID ============ */
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mod-card{display:flex;flex-direction:column;align-items:center;padding:18px 10px;border-radius:var(--radius);text-align:center;text-decoration:none;color:#fff;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.mod-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:#fff}
.mod-card-icon{font-size:28px;margin-bottom:6px}
.mod-card-name{font-size:12px;font-weight:700}
.mod-card-desc{font-size:10px;opacity:.8;margin-top:2px}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border:none;border-radius:var(--radius);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;line-height:1.4}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--primary-light);color:#fff}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#15803D;color:#fff}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#B91C1C;color:#fff}
.btn-warning{background:var(--warning);color:#fff}.btn-warning:hover{background:#B45309;color:#fff}
.btn-outline{background:#fff;color:var(--gray-700);border:1px solid var(--gray-200)}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:transparent;color:var(--gray-600);border:none}.btn-ghost:hover{background:var(--gray-100)}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-lg{padding:8px 20px;font-size:13px}
.btn-block{width:100%}

/* ============ FORMS ============ */
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--gray-700);margin-bottom:4px}
.form-input{width:100%;height:34px;padding:0 10px;border:1px solid var(--gray-200);border-radius:var(--radius);font-size:12px;outline:none;transition:border-color .15s;background:#fff}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,136,229,.1)}
textarea.form-input{height:auto;padding:8px 10px}
select.form-input{appearance:auto}

/* ============ TABLES ============ */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:12px}
.table th{background:var(--gray-50);color:var(--gray-600);font-weight:600;padding:8px 10px;text-align:left;border-bottom:2px solid var(--gray-200);white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.table td{padding:8px 10px;border-bottom:1px solid var(--gray-100);color:var(--gray-700)}
.table tr:hover td{background:var(--gray-50)}
.table .bold-cell{font-weight:600}

/* ============ BADGES ============ */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:10.5px;font-weight:600;line-height:1.5}
.badge-primary{background:var(--primary-50);color:var(--accent)}
.badge-success{background:var(--success-light);color:var(--success)}
.badge-warning{background:var(--warning-light);color:var(--warning)}
.badge-danger{background:var(--danger-light);color:var(--danger)}
.badge-info{background:var(--info-light);color:var(--info)}
.badge-gray{background:var(--gray-100);color:var(--gray-500)}

/* ============ MODULE PAGE HEADER (blue bar) ============ */
.module-header{background:var(--primary);color:#fff;padding:20px 24px;border-radius:var(--radius) var(--radius) 0 0}
.module-header h1{font-size:18px;font-weight:700;margin-bottom:2px}
.module-header p{font-size:12px;opacity:.75}
.module-header.mh-red{background:linear-gradient(135deg,#C62828,#E53935)}
.module-header.mh-orange{background:linear-gradient(135deg,#E65100,#F57C00)}
.module-header.mh-green{background:linear-gradient(135deg,#2E7D32,#43A047)}
.module-header.mh-blue{background:linear-gradient(135deg,#1565C0,#1E88E5)}
.module-header.mh-teal{background:linear-gradient(135deg,#00695C,#00897B)}
.module-header.mh-purple{background:linear-gradient(135deg,#6A1B9A,#8E24AA)}
.module-header.mh-indigo{background:linear-gradient(135deg,#283593,#3F51B5)}
.module-header.mh-pink{background:linear-gradient(135deg,#AD1457,#D81B60)}
.module-header.mh-amber{background:linear-gradient(135deg,#E65100,#FF8F00)}
.module-header.mh-slate{background:linear-gradient(135deg,#37474F,#546E7A)}
.module-header.mh-cyan{background:linear-gradient(135deg,#00838F,#0097A7)}
.module-header.mh-violet{background:linear-gradient(135deg,#4527A0,#5E35B1)}
.module-header.mh-dark{background:linear-gradient(135deg,var(--primary-dark),var(--primary))}

/* ============ CONTENT AREA (module pages) ============ */
.content-area{padding:16px 20px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-body{padding:16px}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--gray-100)}
.card-title{font-size:13px;font-weight:700;color:var(--gray-800)}
.card-link{font-size:11px;color:var(--accent);font-weight:500}

/* ============ KPI CARDS ============ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kpi-card{background:#fff;border-radius:var(--radius);padding:14px;border:1px solid var(--gray-100);text-align:center}
.kpi-icon{font-size:20px;margin-bottom:4px}
.kpi-value{font-size:22px;font-weight:800;color:var(--gray-900)}
.kpi-label{font-size:10.5px;color:var(--gray-400);font-weight:500;margin-top:2px}
.kpi-card.kpi-blue{border-left:3px solid var(--accent)}
.kpi-card.kpi-green{border-left:3px solid var(--success)}
.kpi-card.kpi-red{border-left:3px solid var(--danger)}
.kpi-card.kpi-amber{border-left:3px solid var(--warning)}
.kpi-card.kpi-purple{border-left:3px solid #7B1FA2}
.kpi-card.kpi-teal{border-left:3px solid #00897B}
.kpi-card.kpi-indigo{border-left:3px solid #3F51B5}
.kpi-card.kpi-pink{border-left:3px solid #D81B60}
.kpi-card.kpi-orange{border-left:3px solid #F57C00}
.kpi-card.kpi-cyan{border-left:3px solid #0097A7}
.kpi-card.kpi-slate{border-left:3px solid #546E7A}
.kpi-card.kpi-emerald{border-left:3px solid #059669}
.kpi-card.kpi-violet{border-left:3px solid #5E35B1}
.kpi-card.kpi-yellow{border-left:3px solid #F59E0B}

/* ============ FORM SECTIONS ============ */
.form-section{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:14px;border:1px solid var(--gray-100)}
.form-section.form-section-blue{border-top:3px solid var(--accent)}
.form-section.form-section-green{border-top:3px solid var(--success)}
.form-section.form-section-red{border-top:3px solid var(--danger)}
.form-section.form-section-amber{border-top:3px solid var(--warning)}
.form-section.form-section-purple{border-top:3px solid #7B1FA2}
.form-section.form-section-indigo{border-top:3px solid #3F51B5}
.form-heading{font-size:14px;font-weight:700;color:var(--gray-800);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.form-heading-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;font-size:14px}
.fhi-blue{background:#E3F2FD;color:#1565C0}
.fhi-green{background:#E8F5E9;color:#2E7D32}
.fhi-red{background:#FFEBEE;color:#C62828}
.fhi-amber{background:#FFF3E0;color:#E65100}
.fhi-purple{background:#F3E5F5;color:#7B1FA2}
.fhi-indigo{background:#E8EAF6;color:#283593}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.full-span{grid-column:1/-1}
.submit-row{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* ============ ACTION CARDS ============ */
.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.action-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:16px;text-align:center;cursor:pointer;text-decoration:none;color:var(--gray-800);transition:all .15s}
.action-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);color:var(--gray-800)}
.action-card-icon{font-size:24px;margin-bottom:6px}
.action-card-title{font-size:12px;font-weight:700}
.action-card-desc{font-size:10.5px;color:var(--gray-400);margin-top:2px}

/* ============ EMPLOYEE GRID ============ */
.employee-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.employee-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:14px;text-align:center}
.employee-card-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin:0 auto 8px}
.employee-card-name{font-size:12.5px;font-weight:700;color:var(--gray-800)}
.employee-card-pos{font-size:10.5px;color:var(--gray-400)}
.employee-card-dept{font-size:10.5px;color:var(--accent);font-weight:500}

/* ============ LIST CARD ============ */
.list-card{border:1px solid var(--gray-200);border-radius:var(--radius);padding:12px;margin-bottom:8px;transition:box-shadow .15s}
.list-card:hover{box-shadow:var(--shadow)}
.list-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:6px}
.list-card-body{font-size:12px;color:var(--gray-500);margin-bottom:6px}
.list-card-footer{display:flex;gap:12px;font-size:11px;color:var(--gray-400)}
.list-card-accent{border-left:3px solid var(--accent)}

/* ============ ADMIN GRID ============ */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.admin-card{border-radius:var(--radius);padding:20px;text-align:center;color:#fff;text-decoration:none;transition:transform .15s,box-shadow .15s;cursor:pointer}
.admin-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:#fff}
.admin-card-icon{font-size:28px;margin-bottom:6px}
.admin-card-title{font-size:13px;font-weight:700}
.admin-card-desc{font-size:10.5px;opacity:.8;margin-top:2px}

/* ============ TOOL GRID ============ */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tool-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:16px;text-align:center;cursor:pointer;transition:all .15s}
.tool-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.tool-card-icon{font-size:24px;margin-bottom:6px}
.tool-card-title{font-size:12px;font-weight:700;color:var(--gray-800)}

/* ============ CHAT ============ */
.chat-area{flex:1;overflow-y:auto;padding:12px;background:var(--gray-50);border-radius:var(--radius);margin-bottom:10px;max-height:350px}
.chat-bubble{max-width:80%;padding:10px 14px;border-radius:var(--radius-lg);margin-bottom:8px;font-size:12px;line-height:1.5}
.chat-bubble-ai{background:var(--primary);color:#fff;border-bottom-left-radius:2px}
.chat-bubble-user{background:#fff;border:1px solid var(--gray-200);margin-left:auto;border-bottom-right-radius:2px}
.chat-bubble-other{background:var(--primary);color:#fff;border-bottom-left-radius:2px}
.chat-bubble-self{background:#fff;border:1px solid var(--gray-200);margin-left:auto;border-bottom-right-radius:2px}
.chat-time{display:block;font-size:9px;opacity:.5;margin-top:3px;text-align:right}
.chat-input-row{display:flex;gap:8px}
.chat-input{flex:1;padding:8px 12px;border:1px solid var(--gray-200);border-radius:20px;font-size:12px;outline:none}
.chat-input:focus{border-color:var(--accent)}
.chat-input-area{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--gray-200)}

/* ============ CALENDAR MODULE ============ */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}

/* ============ SAP PANELS ============ */
.sap-panel{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px;margin-top:12px}
.sap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sap-header h3{font-size:14px;color:var(--primary)}
.sap-close{background:none;border:1px solid var(--gray-200);border-radius:4px;padding:4px 10px;font-size:11px;cursor:pointer;color:var(--gray-600)}
.sap-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sap-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:14px;text-align:center}
.sap-card-icon{font-size:20px;margin-bottom:4px}
.sap-card-label{font-size:10px;color:var(--gray-400);font-weight:600;text-transform:uppercase}
.sap-card-value{font-size:20px;font-weight:800;color:var(--gray-900)}
.sap-card-sub{font-size:10px;color:var(--gray-400)}
.sap-card.sap-card-green{border-top:3px solid var(--success)}
.sap-card.sap-card-blue{border-top:3px solid var(--accent)}
.sap-card.sap-card-red{border-top:3px solid var(--danger)}
.sap-ref{font-size:10px;color:var(--gray-400);margin-top:12px;text-align:right;font-style:italic}
.sap-detail-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-200)}
.sap-detail-section h4{font-size:12px;font-weight:600;margin-bottom:6px;color:var(--gray-700)}
.sap-detail-row{display:flex;justify-content:space-between;padding:3px 0;font-size:11.5px;color:var(--gray-600)}

/* ============ LOGIN ============ */
.login-container{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--topbar-h) - 60px)}
.login-form{background:#fff;border-radius:var(--radius-lg);padding:36px;width:100%;max-width:380px;box-shadow:var(--shadow-md)}
.login-form h2{font-size:18px;text-align:center;margin-bottom:4px;color:var(--gray-900)}
.login-form .subtitle{text-align:center;font-size:12px;color:var(--gray-400);margin-bottom:16px}
.login-info{background:var(--info-light);color:var(--info);padding:8px 12px;border-radius:var(--radius);font-size:11px;margin-bottom:14px;text-align:center}

/* ============ PROGRESS ============ */
.progress{height:6px;background:var(--gray-100);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;border-radius:3px;transition:width .6s var(--ease)}
.progress-bar-primary{background:var(--accent)}
.progress-bar-success{background:var(--success)}
.progress-bar-blue{background:var(--accent)}
.progress-bar-green{background:var(--success)}

/* ============ MODAL ============ */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:var(--radius-lg);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--gray-100)}
.modal-header h3{font-size:15px;font-weight:700}
.modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--gray-400);padding:4px}
.modal-close:hover{color:var(--gray-700)}
.modal-body{padding:18px}
.modal-lg{max-width:600px}

/* ============ EMPTY STATE ============ */
.empty-state{text-align:center;padding:24px;color:var(--gray-400)}
.empty-state-icon{font-size:32px;margin-bottom:8px}
.empty-state p{font-size:12px}

/* ============ SECTION ============ */
.section-title{font-size:14px;font-weight:700;color:var(--gray-800);display:flex;align-items:center;gap:6px}
.section-heading{font-size:14px;font-weight:700;color:var(--gray-800);margin-bottom:10px}

/* ============ WEEKLY BAR (time tracking) ============ */
.weekly-bar{display:flex;gap:6px}
.weekly-day{flex:1;text-align:center;padding:10px 4px;border-radius:var(--radius);border:1px solid var(--gray-100)}
.weekly-day-active{background:var(--primary-50);border-color:var(--accent)}
.weekly-day-inactive{background:var(--gray-50)}
.wd-label{font-size:10px;font-weight:600;color:var(--gray-500)}
.wd-value{font-size:16px;font-weight:800;color:var(--gray-900)}
.wd-unit{font-size:9px;color:var(--gray-400)}

/* ============ SOCIAL CARDS ============ */
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.social-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:14px;text-align:center}
.social-card-icon{font-size:24px;margin-bottom:4px}
.social-card-title{font-size:11px;font-weight:700;color:var(--gray-800)}

/* ============ CONVERSATION ============ */
.conversation-info{display:flex;align-items:center;gap:10px}
.avatar-circle{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.unread-badge{background:var(--danger);color:#fff;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.conversation-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.cursor-pointer{cursor:pointer}

/* ============ POLICY CARDS ============ */
.policy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.policy-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:16px}
.policy-card-icon{font-size:24px;margin-bottom:6px}

/* ============ LOADING / SPINNER ============ */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px;color:var(--gray-400)}
.spinner{width:28px;height:28px;border:3px solid var(--gray-200);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ FAQ ============ */
.faq-section{margin-top:12px}
.faq-item{border:1px solid var(--gray-100);border-radius:var(--radius);margin-bottom:6px;overflow:hidden}
.faq-q{padding:10px 14px;font-size:12px;font-weight:600;color:var(--gray-800);cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#fff}
.faq-q:hover{background:var(--gray-50)}
.faq-a{padding:0 14px 10px;font-size:12px;color:var(--gray-600);display:none}
.faq-item.open .faq-a{display:block}

/* ============ BACK LINK ============ */
.back-link{color:rgba(255,255,255,.8);text-decoration:none;font-size:12px;display:inline-block;margin-bottom:6px}
.back-link:hover{color:#fff}

/* ============ ALERTS ============ */
.alert{padding:10px 14px;border-radius:var(--radius);font-size:12px;margin-bottom:10px}
.alert-info{background:var(--info-light);color:var(--info);border:1px solid #BAE6FD}
.alert-success{background:var(--success-light);color:var(--success);border:1px solid #BBF7D0}
.alert-warning{background:var(--warning-light);color:var(--warning);border:1px solid #FDE68A}
.alert-danger{background:var(--danger-light);color:var(--danger);border:1px solid #FECACA}

/* ============ CURRENCY/FINANCE ============ */
.currency-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.currency-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:10px;text-align:center}
.breakdown-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--gray-100)}
.breakdown-item:last-child{border-bottom:none}

/* ============ TABS ============ */
.tabs{display:flex;border-bottom:2px solid var(--gray-100);margin-bottom:14px;gap:2px}
.tab{padding:8px 16px;font-size:12px;font-weight:600;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab:hover{color:var(--gray-700)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ============ UTILITY ============ */
.text-center{text-align:center}
.text-muted{color:var(--gray-400)}
.text-sm{font-size:11px}
.text-bold{font-weight:700}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;align-items:center;gap:8px}
.flex-end{display:flex;justify-content:flex-end;gap:6px}
.gap-2{gap:8px}
.gap-3{gap:12px}
.mb-2{margin-bottom:8px}
.mb-4{margin-bottom:14px}
.mb-6{margin-bottom:20px}
.mt-2{margin-top:8px}
.mt-4{margin-top:14px}
.mt-6{margin-top:20px}
.p-4{padding:14px}
.hidden{display:none!important}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.animate-fade{animation:fadeIn .3s var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ============ MISC (used by existing render fns) ============ */
.app-container{max-width:1200px;margin:0 auto;padding:16px}
.hero-section,.info-grid,.quick-actions-grid,.dashboard-main,.dashboard-sidebar,.dashboard-main-left,.modules-grid-wrap{}
.news-list,.event-list,.menu-list,.task-list,.dept-list{}
.news-item,.event-item,.menu-item,.task-item{}
.exchange-row,.exchange-pair,.exchange-flag,.exchange-name,.exchange-rate{}
.weather-card,.clock-card,.exchange-card,.info-right{}
.tip-box{background:var(--warning-light);border-radius:var(--radius);padding:12px;border-left:3px solid var(--warning)}
.tip-box h4{font-size:12px;margin-bottom:4px;color:var(--warning)}
.tip-box p{font-size:11px;color:var(--gray-600)}