:root{--bg:#f5f7fb;--panel:#fff;--text:#1a202c;--muted:#4a5568;--line:#e2e8f0;--primary:#2b6cb0}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Tahoma,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.35}
.shell{display:flex;min-height:100vh;max-width:100vw;overflow:hidden}
.sidebar{width:210px;background:#1f2937;color:#fff;padding:14px;overflow:auto}
.sidebar h2{font-size:20px;margin:0 0 8px 0}
.sidebar p{font-size:12px;margin:0 0 8px 0}
.sidebar a{display:block;color:#e5e7eb;text-decoration:none;padding:5px 0;font-size:13px}
.sidebar a.active{color:#fff;font-weight:700;border-left:3px solid #60a5fa;padding-left:7px;background:rgba(96,165,250,.12)}
.content{flex:1;padding:10px;min-width:0;overflow:auto}
.content h1{font-size:34px;line-height:1.1;margin:4px 0 10px 0}
.content h2{font-size:20px;line-height:1.2;margin:10px 0 8px 0}
.card{background:var(--panel);border:1px solid var(--line);padding:8px;border-radius:6px;margin:6px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
input,select,textarea,button{padding:6px;border:1px solid #cbd5e0;border-radius:6px;width:100%;max-width:100%;font-size:12.5px}
button{background:var(--primary);color:#fff;border:none;cursor:pointer}
table{width:100%;display:block;overflow:auto;white-space:nowrap;background:#fff;border-collapse:collapse;margin-top:8px}
th,td{border:1px solid #e2e8f0;padding:5px;text-align:left;vertical-align:top;font-size:12.5px}
td form{margin-bottom:4px}
canvas{max-width:100%;height:auto}
.ok{background:#c6f6d5;padding:7px;border-radius:6px;font-size:13px}
.err{background:#fed7d7;padding:7px;border-radius:6px;font-size:13px}
.shift-card{border-left:6px solid #718096}
.draggable-shift{cursor:grab}
.draggable-shift.dragging{opacity:.55}
.dropzone.drag-over{outline:2px dashed #2b6cb0;outline-offset:-2px;background:#ebf8ff}
.shift-morning{background:#ebf8ff;border-color:#90cdf4}
.shift-evening{background:#fffaf0;border-color:#f6ad55}
.shift-night{background:#f0fff4;border-color:#68d391}
.shift-general{background:#f7fafc;border-color:#a0aec0}
.status-present{background:#d1fae5}
.status-absent{background:#fee2e2}
.status-permission{background:#fef3c7}
.status-onduty{background:#dbeafe}
.duty-status-panel{background:var(--panel);border:1px solid var(--line);padding:8px;border-radius:6px;margin:6px 0 8px 0}
.duty-status-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.duty-status-head h2,.duty-status-head p{margin:0}
.duty-status-head p{color:var(--muted);font-size:13px;margin-top:3px}
.duty-status-stats .card{margin:0;min-height:54px;display:flex;flex-direction:column;gap:3px;justify-content:center}
.duty-status-stats span{font-size:21px;font-weight:800;line-height:1}
.duty-modal[hidden]{display:none}
.modal-open{overflow:hidden}
.duty-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.duty-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.56)}
.duty-modal-card{position:relative;z-index:1;width:min(1180px,100%);max-height:90vh;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 24px 70px rgba(15,23,42,.35);overflow:hidden}
.duty-modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px;border-bottom:1px solid var(--line)}
.duty-modal-head h2,.duty-modal-head p{margin:0}
.duty-modal-head p{color:var(--muted);font-size:13px;margin-top:3px}
.duty-modal-close{width:34px;min-width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;text-decoration:none}
.duty-modal-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:#f8fafc}
.duty-modal-tabs button{background:#fff;color:#1a202c;border:1px solid var(--line);font-weight:700}
.duty-modal-tabs button.active{background:#2563eb;color:#fff;border-color:#2563eb}
.duty-modal-body{padding:12px;overflow:auto}
.duty-tab-panel{display:none}
.duty-tab-panel.active{display:block}
.duty-tab-panel h3{margin:0 0 8px 0;font-size:16px}
.duty-modal-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.duty-person-list{display:grid;gap:8px;max-height:58vh;overflow:auto;padding-right:2px}
.duty-person-card{margin:0;display:grid;gap:4px;border-left:5px solid #2563eb}
.duty-person-card small{color:var(--muted)}
.duty-person-card span{font-size:12px}
.duty-off-card{border-left-color:#dc2626}
.duty-empty{margin:0;color:var(--muted);background:#f8fafc}
.duty-history-table{min-width:980px;margin-top:0}
.calendar-table td{height:72px;min-width:96px}
.cal-empty{background:#fff}
.cal-none{background:#f8fafc}
.cal-present{background:#dcfce7}
.cal-absent{background:#fee2e2}
.cal-permission{background:#fef3c7}
.cal-present-permission{background:linear-gradient(135deg,#dcfce7 0 50%,#fef3c7 50% 100%)}
.cal-onduty{background:#dbeafe}
.calendar-compact td{height:50px;min-width:74px;padding:3px}
.calendar-compact small{font-size:10px}
.id-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(120deg,#1e3a8a,#2563eb);color:#fff}
.id-card h3,.id-card p{margin:4px 0}
.id-badge{background:#fff;color:#1e3a8a;border-radius:10px;padding:10px 14px;font-weight:700;text-align:center;line-height:1.2}
.id-photo-wrap{display:flex;align-items:center}
.id-photo{width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.id-photo-fallback{width:78px;height:78px;border-radius:50%;background:#bfdbfe;color:#1e3a8a;border:3px solid #fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:700;line-height:1.1}
.kpi-track{margin-top:6px;height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden;min-width:130px}
.kpi-fill{height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb)}
.status-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:600}
.status-approved{background:#dcfce7;color:#166534}
.status-rejected{background:#fee2e2;color:#991b1b}
.status-pending{background:#fef3c7;color:#92400e}
.attendance-split{display:block}
.attendance-calendar-pane table{margin-top:0}
.attendance-history-pane{margin:0;max-height:520px;overflow:auto}
.attendance-history-pane h2{margin:0 0 8px 0}
.attendance-legend{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.attendance-legend .card{margin:0;padding:8px 10px;min-height:44px;display:flex;align-items:center;justify-content:flex-start}
.attendance-legend strong{font-size:13px;line-height:1}

/* Employee attendance: compact + full-width calendar */
.attendance-calendar-pane .calendar-table{
  display:table;
  width:100%;
  table-layout:fixed;
  white-space:normal;
  margin-top:6px;
}
.attendance-calendar-pane .calendar-table th,
.attendance-calendar-pane .calendar-table td{
  width:14.285%;
  min-width:0;
  padding:4px;
}
.attendance-calendar-pane .calendar-compact td{
  height:44px;
  min-width:0;
}
.attendance-calendar-pane .calendar-compact small{
  font-size:9px;
  line-height:1;
}
.attendance-calendar-pane .calendar-table strong{
  font-size:14px;
  line-height:1;
}
.print-only{display:none}

@media print{
  body{background:#fff}
  .sidebar,.no-print,.ok,.err{display:none !important}
  .shell,.content{display:block;overflow:visible;padding:0;margin:0}
  .card{box-shadow:none}
  .print-title{margin-top:0}
  .print-only{display:block !important}
  .duty-print-header{text-align:center;margin:0 0 8px 0}
  .duty-print-header h1{font-size:18px;margin:0}
  .duty-print-header h2{font-size:16px;margin:2px 0}
  .duty-print-header p{font-size:12px;margin:2px 0 6px 0}
  .roster-print-status{text-align:center;font-size:12px;font-weight:700;letter-spacing:.2px}
  table{display:table;width:100%;white-space:normal;overflow:visible}
  th,td{font-size:12px;padding:5px}
}
@media (max-width: 900px){
  .shell{flex-direction:column}
  .sidebar{width:100%;padding:10px}
  .content{padding:8px}
  .content h1{font-size:28px}
  .content h2{font-size:18px}
  .grid{grid-template-columns:1fr}
  .attendance-split{grid-template-columns:1fr}
  .attendance-history-pane{max-height:none}
  .attendance-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duty-status-head{align-items:stretch;flex-direction:column}
  .duty-modal{padding:8px;align-items:stretch}
  .duty-modal-card{max-height:calc(100vh - 16px)}
  .duty-modal-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duty-modal-columns{grid-template-columns:1fr}
  .duty-person-list{max-height:none}
}

.notification-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px}
.notification-card{margin:0}
.notification-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.notification-card p{margin:4px 0;word-break:break-word}
.notification-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compact-form input,.compact-form select{padding:6px;font-size:14px}
.notification-actions{grid-column:1 / -1;display:flex;gap:8px}
.btn-sm{padding:6px 10px;font-size:13px;width:auto;min-width:84px}
.btn-danger{background:#dc2626}

@media (max-width: 900px){
  .notification-form-grid{grid-template-columns:1fr}
}

.employees-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;gap:8px;align-items:center;margin-bottom:8px}
.employees-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
.employees-actions-grid{grid-template-columns:repeat(2,minmax(110px,1fr));gap:6px}
.employees-note{font-size:12px;line-height:1.3}
.btn-compact{padding:6px 10px;font-size:13px;line-height:1.2}

@media (max-width: 1100px){
  .employees-toolbar{grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width: 700px){
  .employees-toolbar{grid-template-columns:1fr}
  .employees-actions-grid{grid-template-columns:1fr}
}

.create-employee-card{max-width:1180px}
.create-employee-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end}
.create-employee-form label{display:flex;flex-direction:column;gap:4px;font-weight:600;min-width:0}
.create-employee-form input,
.create-employee-form select,
.create-employee-form textarea{min-width:0;padding:6px 7px;font-size:12px}
.create-employee-form .form-note{grid-column:1 / -1;font-size:12px;line-height:1.25;color:var(--muted);background:#f8fafc;border:1px solid var(--line);border-radius:7px;padding:7px 9px}
.create-actions{grid-column:1 / -1;display:flex;gap:10px;align-items:center}

@media (max-width: 1100px){
  .create-employee-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .create-employee-form{grid-template-columns:1fr}
}
.employees-row-actions{display:flex;gap:8px;align-items:center}
.btn-link{display:inline-block;background:#2563eb;color:#fff;text-decoration:none;border-radius:6px;padding:6px 10px;font-size:13px;line-height:1.2}
.global-nav{display:flex;gap:8px;margin:4px 0 10px 0}
.btn-nav{padding:6px 12px;min-width:74px;text-align:center}
.btn-nav.active{background:#1d4ed8}
.dashboard-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.dash-card{margin:0;text-decoration:none;color:#0f172a;display:flex;flex-direction:column;gap:6px;min-height:68px;transition:transform .12s ease, box-shadow .12s ease}
.dash-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.12)}
.dash-label{font-size:12.5px;font-weight:600}
.dash-value{font-size:23px;line-height:1}
.dash-employees{background:linear-gradient(120deg,#dbeafe,#bfdbfe)}
.dash-leave{background:linear-gradient(120deg,#fef3c7,#fde68a)}
.dash-performance{background:linear-gradient(120deg,#dcfce7,#bbf7d0)}
.dash-onboarding{background:linear-gradient(120deg,#fae8ff,#f5d0fe)}
.dash-training{background:linear-gradient(120deg,#ccfbf1,#99f6e4)}
.dash-leaderboard{background:linear-gradient(120deg,#cffafe,#a5f3fc)}
.dash-exit{background:linear-gradient(120deg,#fee2e2,#fecaca)}
.dash-roster{background:linear-gradient(120deg,#ede9fe,#ddd6fe)}
.dash-hierarchy{background:linear-gradient(120deg,#e0f2fe,#bae6fd)}
.dashboard-modern{display:grid;gap:10px}
.dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:14px;
  align-items:stretch;
  padding:14px;
  border:1px solid #d9e2ec;
  border-radius:8px;
  background:
    radial-gradient(circle at 88% 12%,rgba(20,184,166,.18),transparent 28%),
    linear-gradient(135deg,#0f172a 0%,#164e63 52%,#0f766e 100%);
  color:#fff;
  overflow:hidden;
}
.dashboard-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#d1fae5;
  font-size:12px;
  font-weight:700;
}
.dashboard-hero h2{margin:8px 0 4px;font-size:22px;line-height:1.08;letter-spacing:0}
.dashboard-hero p{max-width:720px;margin:0;color:#cbd5e1;font-size:13px}
.dashboard-hero-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.dashboard-hero-panel span,.dashboard-hero-panel small{color:#dbeafe;font-size:12px;font-weight:700}
.dashboard-hero-panel strong{font-size:34px;line-height:1}
.dashboard-kpis{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:8px}
.dashboard-kpi{
  position:relative;
  min-height:102px;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:5px;
  padding:10px;
  margin:0;
  color:#0f172a;
  text-decoration:none;
  background:#fff;
  border:1px solid #d9e2ec;
  border-radius:8px;
  overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.dashboard-kpi:before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:var(--dash-tone,#2563eb);
}
.dashboard-kpi:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,23,42,.12);border-color:#c4d1df}
.dashboard-kpi-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--dash-soft,#eff6ff);
  color:var(--dash-tone,#2563eb);
  font-weight:800;
}
.dashboard-kpi-label{color:#475569;font-size:12px;font-weight:800}
.dashboard-kpi strong{font-size:26px;line-height:1;color:#0f172a}
.dashboard-kpi small{color:#64748b;font-size:11.5px;line-height:1.2}
.dashboard-tone-blue{--dash-tone:#2563eb;--dash-soft:#dbeafe}
.dashboard-tone-amber{--dash-tone:#d97706;--dash-soft:#fef3c7}
.dashboard-tone-violet{--dash-tone:#7c3aed;--dash-soft:#ede9fe}
.dashboard-tone-teal{--dash-tone:#0f766e;--dash-soft:#ccfbf1}
.dashboard-tone-green{--dash-tone:#16a34a;--dash-soft:#dcfce7}
.dashboard-tone-indigo{--dash-tone:#4f46e5;--dash-soft:#e0e7ff}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);gap:10px}
.dashboard-panel{
  margin:0;
  padding:10px;
  border:1px solid #d9e2ec;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.dashboard-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px}
.dashboard-panel h3{margin:0;font-size:15px;line-height:1.15}
.dashboard-panel p{margin:3px 0 0;color:#64748b;font-size:12px}
.dashboard-priority-list{display:grid;gap:6px}
.dashboard-priority-list a{
  display:flex;
  gap:8px;
  align-items:center;
  min-height:36px;
  padding:7px 8px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  color:#0f172a;
  text-decoration:none;
  background:#f8fafc;
}
.dashboard-priority-list a:hover{background:#fff;border-color:#cbd5e1}
.dashboard-priority-list strong{font-size:13px}
.priority-dot{width:10px;height:10px;border-radius:50%;background:#2563eb}
.priority-dot.amber{background:#d97706}.priority-dot.violet{background:#7c3aed}.priority-dot.teal{background:#0f766e}.priority-dot.red{background:#dc2626}
.dashboard-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dashboard-actions a{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:7px 8px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
  color:#0f172a !important;
  text-decoration:none;
  font-weight:800 !important;
}
.dashboard-actions a:hover{background:#eef6ff;border-color:#bfdbfe}
.dashboard-actions span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 24px;
  border-radius:6px;
  background:#0f172a;
  color:#fff;
  font-size:12px;
}
.dashboard-health{margin-top:9px;padding:9px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0}
.dashboard-health div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.dashboard-health span{font-size:12px;color:#475569;font-weight:800}
.dashboard-health strong{font-size:18px}
.dashboard-progress{height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.dashboard-progress span{display:block;height:100%;background:linear-gradient(90deg,#14b8a6,#2563eb);border-radius:inherit}
.dashboard-view-all{color:#2563eb;text-decoration:none;font-size:13px;font-weight:800}
.dashboard-empty{padding:12px;text-align:center;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px}
.dashboard-notifications{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dashboard-notifications article{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  min-height:92px;
  padding:9px;
  border:1px solid #e2e8f0;
  border-left:4px solid #2563eb;
  border-radius:8px;
  background:#f8fafc;
}
.dashboard-notifications strong{font-size:14px}
.dashboard-notifications p{margin:5px 0 0;color:#475569;line-height:1.35}
.dashboard-notifications small{color:#64748b;font-size:12px}
.hierarchy-page{padding:12px}
.hierarchy-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.hierarchy-head h2,.hierarchy-head p{margin:0}
.hierarchy-head p{color:var(--muted);font-size:13px;margin-top:3px}
.hierarchy-chart-wrap{width:100%;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px}
.hierarchy-chart{display:block;width:100%;min-width:980px;height:auto}
.leave-cards{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.leave-card{margin:0;min-height:72px;display:flex;flex-direction:column;justify-content:center}
.leave-card strong{font-size:14px}
.leave-num{font-size:24px;font-weight:700;line-height:1.1;margin-top:4px}
.leave-card a{text-decoration:none;color:inherit}
.leave-available{background:linear-gradient(120deg,#dbeafe,#bfdbfe)}
.leave-availed{background:linear-gradient(120deg,#fef3c7,#fde68a)}
.leave-balance{background:linear-gradient(120deg,#dcfce7,#bbf7d0)}
.leave-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.leave-status-form{display:flex;gap:6px;align-items:center}
.leave-status-form select{min-width:120px;width:auto}
.leave-status-form .btn-compact{width:auto}
.leave-status-quick{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.leave-status-quick .btn-compact{width:auto;min-width:82px}
.table-scroll{width:100%;overflow-x:auto}
.leave-approval-table{min-width:980px}
.leave-approval-table .leave-actions{min-width:280px}
.attendance-records{display:grid;grid-template-columns:1fr;gap:8px}
.attendance-item{margin:0;padding:8px}
.attendance-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin-bottom:6px}
.attendance-meta span{font-size:13px;line-height:1.25}
.attendance-actions{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.matrix-toolbar{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.matrix-btn{width:auto;min-width:150px;padding:6px 10px;line-height:1.1}
.compact-matrix-card{padding:8px}
.matrix-table-card{margin:4px 0 0 0;padding:6px}
#absentMatrix{margin-top:0}
#absentMatrix th,#absentMatrix td{padding:5px;font-size:12px}
#absentMatrix input[type="date"]{padding:5px;font-size:12px}
.leaderboard-list{display:grid;gap:8px}
.leaderboard-row{display:grid;grid-template-columns:54px minmax(180px,1fr) minmax(130px,180px) minmax(110px,150px);gap:10px;align-items:center;margin:0}
.leaderboard-rank{font-size:24px;font-weight:800;text-align:center;color:#1e40af}
.leaderboard-score{font-size:22px;font-weight:800;color:#166534}
.leaderboard-meta{color:var(--muted);font-size:12px}
.leaderboard-empty{padding:14px;text-align:center;color:var(--muted)}

.reports-page{display:grid;gap:14px}
.reports-toolbar{display:flex;justify-content:flex-end;align-items:end;gap:12px;margin-top:-4px}
.reports-toolbar label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#475569;letter-spacing:.02em}
.reports-toolbar input{width:206px;height:47px;border-color:#1d4ed8;background:#fff;color:#0f172a;font-size:16px}
.reports-apply{width:auto;height:36px;padding:0 14px;background:#fff;color:#2563eb;border:1px solid #2563eb;border-radius:7px;font-size:16px}
.reports-groups{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:12px;align-items:start}
.report-panel{--report-color:#2563eb;--report-soft:#eff6ff;background:#fff;border:1px solid #cfd8dc;border-radius:5px;overflow:hidden;margin:0}
.report-panel h2{margin:0;padding:14px 20px;font-size:20px;color:var(--report-color);background:var(--report-soft);border-left:5px solid var(--report-color)}
.report-list{display:grid;gap:8px;padding:10px 11px 12px}
.report-link{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:12px;min-height:50px;padding:9px 12px;background:#fff;color:#020617;text-decoration:none;border:1px solid #cfd8dc;border-left:4px solid var(--report-color);border-radius:6px;font-weight:700;line-height:1.25;transition:background .12s ease,border-color .12s ease,transform .12s ease}
.report-link:hover{background:#f8fafc;border-color:#94a3b8;transform:translateY(-1px)}
.report-icon{width:27px;height:27px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--report-soft);color:var(--report-color)}
.report-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.report-green{--report-color:#22c55e;--report-soft:#eaf8ef}
.report-orange{--report-color:#d97706;--report-soft:#fff4e2}
.report-teal{--report-color:#14b8a6;--report-soft:#e8fbf8}
.report-blue{--report-color:#0ea5e9;--report-soft:#eaf5ff}
.report-purple{--report-color:#7c3aed;--report-soft:#f0eafa}
.reports-summary{margin-top:2px}
.reports-tables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.reports-tables .card{margin:0}

@media (max-width: 1300px){
  .reports-groups{grid-template-columns:repeat(3,minmax(220px,1fr))}
}
@media (max-width: 900px){
  .reports-toolbar{justify-content:stretch;align-items:stretch;display:grid;grid-template-columns:1fr 1fr auto}
  .reports-toolbar input{width:100%;font-size:14px}
  .reports-groups{grid-template-columns:1fr}
  .reports-tables{grid-template-columns:1fr}
}
@media (max-width: 620px){
  .reports-toolbar{grid-template-columns:1fr}
  .reports-apply{width:100%;height:40px}
}

@media (max-width: 900px){
  .matrix-toolbar{grid-template-columns:1fr}
  .matrix-btn{width:100%;min-width:0}
  .leaderboard-row{grid-template-columns:42px 1fr}
  .dashboard-hero{grid-template-columns:1fr;padding:16px}
  .dashboard-hero h2{font-size:22px}
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-main-grid{grid-template-columns:1fr}
  .dashboard-notifications{grid-template-columns:1fr}
  .hierarchy-head{flex-direction:column}
  .hierarchy-head .btn-link{width:100%;text-align:center}
  .hierarchy-chart{min-width:760px}
}
.auth-wrap{min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center;padding:10px}
.auth-card{width:100%;max-width:360px;padding:16px 14px;border-radius:12px;box-shadow:0 10px 24px rgba(15,23,42,.08);margin:0}
.auth-title{margin:0 0 4px 0;font-size:24px;line-height:1.2}
.auth-subtitle{margin:0 0 12px 0;color:var(--muted);font-size:13px}
.auth-form{display:grid;gap:10px}
.auth-form label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px}
.auth-form input{padding:9px;font-size:14px}
.auth-btn{padding:9px;font-size:14px;font-weight:600}
.auth-register-link{margin:12px 0 0 0;text-align:center}
.auth-register-link a{color:#2563eb;font-weight:700}
.employee-register-card{max-width:760px}
.employee-register-form{grid-template-columns:1fr 1fr}
.employee-register-form .create-actions{grid-column:1 / -1}
.employee-onboarding-card{display:grid;gap:8px}

.onboarding-summary{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:8px}
.onboarding-stat{margin:0;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px;min-height:70px;justify-content:center}
.onboarding-stat strong{font-size:24px;line-height:1}
.onboarding-toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:8px 0}
.onboarding-filter{display:grid;grid-template-columns:minmax(160px,220px) auto;gap:8px}
.onboarding-create{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;align-items:end}
.onboarding-create label,.onboarding-card label{display:flex;flex-direction:column;gap:5px;font-weight:600}
.onboarding-create textarea,.onboarding-card textarea{resize:vertical}
.onboarding-checks{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:6px;align-items:center}
.onboarding-checks label{display:flex;flex-direction:row;gap:6px;align-items:center;font-weight:600;background:#f8fafc;border:1px solid var(--line);border-radius:6px;padding:6px}
.onboarding-checks input{width:auto}
.onboarding-list{display:grid;gap:8px}
.onboarding-card{margin:0;display:grid;gap:8px}
.onboarding-card-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.onboarding-card-head small{display:block;color:var(--muted);margin-top:3px}
.onboarding-progress{background:#dbeafe;color:#1e3a8a}
.onboarding-progressbar{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.onboarding-progressbar span{display:block;height:100%;background:#2563eb}
.onboarding-fields{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px}
.onboarding-actions{display:flex;gap:8px}
.onboarding-actions .btn-compact{width:auto;min-width:90px}

@media (max-width: 900px){
  .onboarding-toolbar{align-items:stretch;flex-direction:column}
  .onboarding-filter,.onboarding-create,.onboarding-fields{grid-template-columns:1fr}
  .onboarding-checks{grid-template-columns:1fr 1fr}
}

@media (max-width: 520px){
  .onboarding-checks{grid-template-columns:1fr}
  .onboarding-card-head{flex-direction:column}
}

.training-toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:8px 0}
.training-form{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;align-items:end}
.training-form label,.training-card label,.employee-training-card label{display:flex;flex-direction:column;gap:5px;font-weight:600}
.training-form textarea{grid-column:1 / -1;resize:vertical}
.training-list{display:grid;gap:8px}
.training-card{margin:0;display:grid;gap:8px}
.training-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.training-meta{color:var(--muted);font-size:12px}
.training-assignments{display:grid;gap:6px}
.training-assignment{display:grid;grid-template-columns:minmax(180px,1fr) 140px 100px minmax(160px,1fr) auto;gap:6px;align-items:center}
.training-actions{display:flex;gap:8px}
.training-actions .btn-compact{width:auto;min-width:90px}
.employee-insights{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi-comparison{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:8px}
.kpi-box{margin:0}
.kpi-box strong{display:block;font-size:22px;line-height:1.1}
.employee-training-list{display:grid;gap:8px}
.employee-training-card{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.employee-training-card form{display:grid;grid-template-columns:140px auto;gap:6px;align-items:end}
.payroll-workflow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.payroll-workflow strong,.payroll-workflow span{display:inline-flex;min-height:30px;align-items:center;padding:5px 9px;border-radius:7px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12px}
.payroll-workflow strong{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.payslip-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.payslip-head h2,.payslip-head p{margin:0 0 4px}

@media (max-width: 1000px){
  .training-form,.employee-insights,.kpi-comparison{grid-template-columns:1fr}
  .training-assignment{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .training-toolbar,.training-head{flex-direction:column;align-items:stretch}
  .training-assignment,.employee-training-card,.employee-training-card form{grid-template-columns:1fr}
  .payslip-head{flex-direction:column}
  .employee-register-form{grid-template-columns:1fr}
}

/* Hospital HR operational redesign */
:root{
  --bg:#f0f4f8;
  --panel:#ffffff;
  --text:#1a2733;
  --muted:#6b7f90;
  --line:#d0dce8;
  --primary:#1a3a5c;
  --primary-2:#10283f;
  --accent:#e8401b;
  --success:#1a7a4a;
  --warning:#b37a00;
  --danger:#c0392b;
  --info:#0c6a9d;
  --soft-primary:#e7eef6;
  --soft-accent:#fff0eb;
  --shadow:0 8px 22px rgba(26,39,51,.06);
}

html{height:100%}
body{
  min-height:100%;
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
  line-height:1.45;
}

.shell{
  display:block;
  min-height:100vh;
  overflow:visible;
  background:var(--bg);
}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:226px;
  padding:12px 10px;
  background:var(--primary);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.08);
  overflow:auto;
  z-index:30;
}

.brand-block{
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 2px 10px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.brand-mark{
  width:32px;
  height:32px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--primary);
  font-weight:800;
  letter-spacing:.3px;
}

.sidebar h2{
  margin:0;
  font-size:15px;
  line-height:1.1;
  font-weight:750;
}

.brand-block span{
  display:block;
  margin-top:3px;
  color:#c9d7e5;
  font-size:11px;
}

.profile-block{
  margin:10px 0 8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:8px;
  background:rgba(255,255,255,.07);
}

.profile-block strong,
.profile-block span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-block strong{font-size:13px}
.profile-block span{margin-top:2px;color:#d7e2ee;font-size:11px}

.menu-section{
  margin:12px 8px 4px;
  color:#aebfd0;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.sidebar a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:30px;
  margin:2px 0;
  padding:5px 8px;
  border-left:3px solid transparent;
  border-radius:0 7px 7px 0;
  color:#edf4fb;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
}

.sidebar a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.sidebar a.active{
  color:#fff;
  font-weight:800;
  border-left-color:var(--accent);
  background:rgba(255,255,255,.13);
  padding-left:10px;
}

.nav-icon{
  flex:0 0 20px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:10px;
  font-weight:800;
}

.sidebar a.active .nav-icon{
  background:var(--accent);
}

.logout-link{
  margin-top:18px !important;
  border-top:1px solid rgba(255,255,255,.12);
}

.content{
  min-height:100vh;
  margin-left:226px;
  padding:64px clamp(8px,1vw,14px) 14px;
  overflow:visible;
  background:var(--bg);
}

.topbar{
  position:fixed;
  top:0;
  right:0;
  left:226px;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px clamp(8px,1vw,14px);
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:20;
}

.topbar h1{
  margin:0;
  font-size:18px;
  line-height:1.15;
  color:var(--text);
  font-weight:800;
}

.topbar p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.icon-btn,
.user-chip{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--primary);
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.icon-btn:hover,
.icon-btn.active{
  border-color:#bbcad9;
  background:var(--soft-primary);
}

.user-chip{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.content > h1{
  display:none;
}

.content h2{
  margin:10px 0 6px;
  font-size:15px;
  line-height:1.25;
  color:var(--text);
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px;
  margin:6px 0;
  box-shadow:var(--shadow);
}

.stats,
.grid{
  gap:8px;
}

.stats{
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
}

.dashboard-cards{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}

.dash-card{
  position:relative;
  min-height:66px;
  padding:8px 8px 8px 40px;
  justify-content:center;
  color:var(--text);
  background:#fff !important;
  border-color:var(--line);
  box-shadow:var(--shadow);
}

.dash-card:before{
  content:"";
  position:absolute;
  left:8px;
  top:10px;
  width:24px;
  height:24px;
  border-radius:7px;
  background:var(--soft-primary);
  border:1px solid #c8d7e6;
}

.dash-card:after{
  position:absolute;
  left:15px;
  top:13px;
  color:var(--primary);
  font-size:12px;
  font-weight:900;
}

.dash-employees:after{content:"E"}
.dash-leave:after{content:"L";color:var(--warning)}
.dash-onboarding:after{content:"O";color:var(--info)}
.dash-training:after{content:"T";color:var(--success)}
.dash-performance:after{content:"K";color:var(--primary)}
.dash-leaderboard:after{content:"S";color:var(--accent)}
.dash-exit:after{content:"X";color:var(--danger)}
.dash-roster:after{content:"R";color:var(--info)}
.dash-leave:before{background:#fff7df;border-color:#ead38a}
.dash-onboarding:before,.dash-roster:before{background:#e7f4fb;border-color:#b8d8e9}
.dash-training:before{background:#e7f5ee;border-color:#b7dbc8}
.dash-leaderboard:before{background:var(--soft-accent);border-color:#f2c6b8}
.dash-exit:before{background:#fdeceb;border-color:#efc6c1}

.dash-label{
  color:var(--muted);
  font-size:9.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dash-value{
  margin-top:2px;
  font-size:20px;
  line-height:1;
  color:var(--text);
}

input,
select,
textarea{
  width:100%;
  min-height:28px;
  padding:5px 7px;
  border:1px solid #bdcddd;
  border-radius:6px;
  background:#fff;
  color:var(--text);
  font-size:13px;
}

textarea{min-height:56px}

input[type="checkbox"],
input[type="radio"]{
  width:auto;
  min-height:0;
  padding:0;
}

input:focus,
select:focus,
textarea:focus{
  outline:2px solid rgba(26,58,92,.16);
  border-color:#7897b5;
}

button,
.btn-link,
.btn-compact,
.btn-sm,
.auth-btn{
  width:auto;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid var(--primary);
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  font-size:12.5px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
}

button:hover,
.btn-link:hover{
  background:var(--primary-2);
}

.btn-danger,
button.btn-danger{
  border-color:var(--danger);
  background:var(--danger);
}

a:not(.sidebar a):not(.dash-card):not(.icon-btn):not(.btn-link){
  color:var(--primary);
  font-weight:700;
}

form.card,
.compact-form,
.create-employee-form,
.employee-register-form,
.training-form,
.onboarding-create{
  border-color:var(--line);
}

label{
  color:var(--text);
  font-size:12px;
  font-weight:750;
}

small,
.employees-note,
.leaderboard-meta,
.training-meta{
  color:var(--muted);
}

table{
  display:table;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  white-space:normal;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
}

th,
td{
  border:0;
  border-bottom:1px solid #e3ebf2;
  padding:6px 7px;
  font-size:11px;
  vertical-align:middle;
}

th{
  background:#f7fafc;
  color:#4f6678;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}

tr:hover td{
  background:#fbfdff;
}

tr:last-child td{
  border-bottom:0;
}

td form{
  margin:0;
}

.status-badge,
[class^="status-"],
[class*=" status-"]{
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

.status-approved,
.status-present,
.cal-present{
  background:#e4f4eb;
  color:var(--success);
}

.status-rejected,
.status-absent,
.cal-absent{
  background:#fdeceb;
  color:var(--danger);
}

.status-pending,
.status-permission,
.cal-permission{
  background:#fff6de;
  color:var(--warning);
}

.status-onduty,
.cal-onduty{
  background:#e5f2f8;
  color:var(--info);
}

.status-draft{background:#eef3f7;color:var(--muted)}
.status-processed{background:#e5f2f8;color:var(--info)}
.status-paid{background:#e4f4eb;color:var(--success)}
.status-hold{background:#fff6de;color:var(--warning)}

.department-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  margin-bottom:8px;
}

.department-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:86px;
  color:var(--text);
  text-decoration:none;
}

.department-card:hover,
.department-card.selected{
  border-color:var(--accent);
  box-shadow:0 8px 22px rgba(232,64,27,.12);
}

.department-card-label{
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.department-card strong{
  font-size:26px;
  line-height:1;
  color:var(--primary);
}

.department-card small{
  color:var(--muted);
  font-size:11px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.section-head h2,
.section-head p{
  margin:0;
}

.section-head p{
  color:var(--muted);
  font-size:12px;
}

.employee-mini-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px;
}

.employee-mini-card{
  display:grid;
  gap:3px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fbfe;
}

.employee-mini-card span,
.employee-mini-card small{
  color:var(--muted);
}

.settings-list{
  display:grid;
  gap:8px;
}

.settings-row{
  display:grid;
  grid-template-columns:minmax(180px,260px) minmax(260px,1fr) auto;
  gap:10px;
  align-items:end;
}

.settings-row textarea{
  min-height:42px;
}

.settings-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.settings-meta span{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}

.rbac-table code{
  color:var(--muted);
  font-size:11px;
}

.rbac-check{
  text-align:center;
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

@media (max-width: 760px){
  .settings-row{
    grid-template-columns:1fr;
  }

  .settings-meta{
    align-items:stretch;
  }
}

.ok,
.err{
  margin:0 0 10px;
  padding:9px 11px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
}

.ok{
  border:1px solid #b8ddc9;
  background:#e7f5ee;
  color:var(--success);
}

.err{
  border:1px solid #efc6c1;
  background:#fdeceb;
  color:var(--danger);
}

.employees-toolbar,
.notification-form-grid,
.onboarding-filter,
.matrix-toolbar{
  padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
}

.employees-row-actions,
.leave-actions,
.leave-status-form,
.leave-status-quick,
.training-actions,
.onboarding-actions,
.notification-actions{
  gap:6px;
}

.id-card{
  background:linear-gradient(120deg,var(--primary),#2d587d);
}

.kpi-fill,
.onboarding-progressbar span{
  background:var(--accent);
}

.auth-wrap{
  min-height:100vh;
  margin-left:0;
  background:var(--bg);
}

.auth-card{
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 16px 42px rgba(26,39,51,.12);
}

.auth-title{
  color:var(--primary);
}

@media (max-width: 900px){
  .shell{
    display:block;
  }

  .sidebar{
    position:relative;
    top:auto;
    width:100%;
    max-height:none;
    padding:8px;
  }

  .sidebar{
    display:grid;
    grid-template-columns:1fr;
  }

  .sidebar a{
    display:inline-flex;
    width:auto;
    margin-right:4px;
  }

  .sidebar .menu-section{
    clear:both;
  }

  .brand-block{
    padding-bottom:10px;
  }

  .profile-block{
    margin:10px 0;
  }

  .menu-section{
    margin-top:12px;
  }

  .sidebar a{
    min-height:32px;
    padding:6px 9px;
  }

  .content{
    margin-left:0;
    padding:60px 8px 12px;
  }

  .topbar{
    left:0;
    min-height:50px;
    padding:7px 8px;
  }

  .topbar h1{
    font-size:16px;
  }

  .topbar p{
    display:none;
  }

  .top-actions{
    gap:5px;
  }

  .icon-btn,
  .user-chip{
    width:28px;
    height:28px;
  }

  .stats,
  .dashboard-cards{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }

  table{
    display:block;
    overflow:auto;
    white-space:nowrap;
  }
}

@media (max-width: 560px){
  .content{
    padding-left:8px;
    padding-right:8px;
  }

  .stats,
  .dashboard-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grid{
    grid-template-columns:1fr;
  }

  .dash-card{
    min-height:64px;
    padding-left:40px;
  }

  .topbar{
    align-items:flex-start;
  }

  .top-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
}

@media (max-width: 380px){
  .stats,
  .dashboard-cards{
    grid-template-columns:1fr;
  }

  .topbar h1{
    font-size:15px;
  }

  .sidebar a{
    width:100%;
  }
}