*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#111;background:linear-gradient(180deg,#eaf2ff 0%,#f6f9ff 60%,#ffffff 100%);display:flex;flex-direction:column}
.content{display:flex;margin-left:280px}
/* Wider sidebar (edge stripe) with header-matching color */
.sidebar{width:280px;background:linear-gradient(180deg,#1f57bf 0%, #1a4aa5 100%);color:#fff;height:100vh;padding:18px;position:fixed;top:0;left:0;z-index:10;overflow-y:auto}
.brand{font-weight:700;margin-bottom:16px}
/* Tabs larger, proportional to sidebar width */
.sidebar button{width:100%;margin:8px 0;padding:14px 16px;border:0;border-radius:10px;background:#2c5fd5;color:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;gap:10px}
.sidebar button .icon{font-size:18px;line-height:1}
.sidebar button:hover{background:#3b6ee3}
.form-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.form-row input{padding:8px 10px;border:1px solid #cfe0ff;border-radius:8px}
.form-row .chk{display:flex;align-items:center;gap:6px;color:#1f57bf}
main{flex:1;padding:24px}

/* Hero header */
.hero{position:relative;border-radius:0 16px 16px 0;padding:24px 28px;margin:0 0 20px 280px;overflow:hidden;
	background-image: linear-gradient(135deg, rgba(15,49,117,0.75), rgba(31,87,191,0.45)), url('/assets/AmbSam.png');
	background-size: cover; background-position: center; background-repeat:no-repeat;
	border:0; box-shadow: 0 10px 30px rgba(28,52,120,0.18);
	color:#fff;
	min-height: 360px; /* approx. +50% taller presence */
}
.hero-inner{display:flex;align-items:center;justify-content:flex-start;gap:16px}
.hero-brand{display:flex;align-items:center;gap:14px}
.hero-logo{filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); border-radius:12px}
.hero-title{display:flex;flex-direction:column}
.hero-line1{font-weight:800;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.25);font-size:30px;line-height:1.1}
.hero-line2{font-weight:800;font-size:26px;color:#eaf2ff;text-shadow:0 2px 6px rgba(0,0,0,.25);letter-spacing:.5px;line-height:1.1}
.hero-line2 .accent{display:inline-block;background:rgba(255,255,255,.18);padding:2px 10px;border-radius:8px;color:#fff}
.hero-art{display:flex;align-items:center;gap:10px;opacity:.95;position:absolute;right:24px;top:18px}
.hero-art .illu{height:82px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.hero-art .calendar{height:120px;opacity:.98;transform:rotate(15deg);transform-origin:center}
.hero-copy{position:absolute;right:20px;bottom:10px;font-size:12px;opacity:.9}

section{display:none}
.route.active{display:block}

.timer{background:#fff;border:1px solid #eee;border-radius:10px;padding:20px;max-width:640px}
.timer #timerDisplay{font-size:40px;font-weight:700;margin-bottom:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
/* Wider buttons with larger font and icon spacing */
.actions button,.actions select{padding:12px 16px;border-radius:10px;border:1px solid #ccc;background:#fff;font-size:16px}
.actions button{background:#6a5acd;border-color:#6a5acd;color:#fff;display:flex;align-items:center;gap:10px}
.actions button:disabled{opacity:.6;cursor:not-allowed}

.auth-card{background:#fff;border:1px solid #eee;border-radius:10px;max-width:420px;padding:16px}
.auth-card input{width:100%;margin:6px 0;padding:12px;border:1px solid #ccc;border-radius:8px}
.row{display:flex;gap:10px}
.btn-primary{background:#6a5acd;color:#fff;border:0;padding:12px 16px;border-radius:10px;font-size:16px;display:inline-flex;align-items:center;gap:8px}
.btn-secondary{background:#e4e7ff;color:#333;border:0;padding:12px 16px;border-radius:10px;font-size:16px;display:inline-flex;align-items:center;gap:8px}
.msg{margin-top:8px;color:#b00}

/* Tables */
.card{background:#fff;border:1px solid #e0e8ff;border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(31,87,191,0.08)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
thead th{position:sticky;top:0;background:#eaf2ff;color:#1f2b6d;font-weight:700;border-bottom:1px solid #cfe0ff;padding:10px}
tbody td{border-bottom:1px solid #eef2ff;padding:10px}
tbody tr:hover{background:#fafbff}

/* Presence table */
.presence th,.presence td{font-size:12px;padding:6px 8px;text-align:center}
.presence thead th.sticky-left{position:sticky;left:0;background:#eaf2ff;z-index:1;text-align:left}
.presence tbody td.sticky-left{position:sticky;left:0;background:#fff;text-align:left;font-weight:700}
.presence thead th.day-head{background:#dbeafe;color:#1e3a8a}
.presence thead th.sum-head{background:#fde68a;color:#7a5200}
.presence thead th.day-totals{font-size:10px;color:#334155;font-weight:700}
.presence .wknd{background:#fff8e1}
.presence .holiday{background:#ffe4e6}
.presence .worked{color:#14532d;font-weight:800}
.presence .code{font-weight:800}

/* Calendar Concedii */
#calTable thead.calendar th.sticky-left{position:sticky;left:0;background:#eaf2ff;z-index:1;text-align:left}
#calTable tbody.calendar td.sticky-left{position:sticky;left:0;background:#fff;text-align:left;font-weight:700}
#calTable thead .day-head{background:#dbeafe;color:#1e3a8a}
#calTable .wknd{background:#fff8e1}
#calTable .holiday{background:#ffe4e6}
#calTable td.code{font-weight:800;text-align:center}
#calTable td.code-CO{background:#eaf9ff;color:#0b5a7a}
#calTable td.code-CM{background:#ffeef0;color:#7a0b22}
#calTable td.code-MA{background:#f5f0ff;color:#3b2a7a}
#calTable td.code-S{background:#fff7ed;color:#7a3a0b}
#calTable td.code-DE{background:#ecfdf5;color:#065f46}
#calTable td.code-AN{background:#fff7f7;color:#7a0b0b}

/* Make timer/card bigger */
.timer{max-width:840px}
.timer #timerDisplay{font-size:48px}
.form-row input{min-width:180px}
/* Make form buttons larger too */
.form-row button{padding:12px 16px;border-radius:10px;font-size:16px;display:inline-flex;align-items:center;gap:8px}

@media (max-width: 820px){
	/* Stack layout on small screens */
	.content{margin-left:0}
	.sidebar{position:static;width:100%;height:auto}
	.hero-inner{flex-direction:column;align-items:flex-start}
	.hero-art{align-self:flex-end}
	.hero{min-height: 260px;margin:0 0 20px 0;border-radius:16px}
	.hero-line1{font-size:24px}
	.hero-line2{font-size:20px}
	.hero-art .calendar{height:88px}
}

/* Footer */
.site-footer{margin:20px 0 10px;color:#3b4c8f;opacity:.85;font-size:12px}

/* Pontaj Cronometru layout */
.pc-layout{display:grid;grid-template-columns:1fr;gap:18px;width:100%;max-width:1280px;margin:0 auto}
.profile-card,.controls-card,.welcome-card{background:#fff;border:1px solid #e0e8ff;border-radius:14px;padding:22px;box-shadow:0 6px 18px rgba(31,87,191,0.08)}
.user-avatar{width:72px;height:72px;border-radius:50%;background:#e6edff;color:#1f57bf;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;box-shadow:inset 0 0 0 3px #cfe0ff}
.profile-card{display:flex;align-items:center;gap:14px}
.welcome-card{display:flex;align-items:center;gap:14px}
.user-info{display:flex;flex-direction:column;gap:6px}
.user-name{font-weight:900;font-size:26px;color:#1c2a6d}
.user-meta{display:flex;gap:16px;color:#3956a6;flex-wrap:wrap;font-size:16px}

.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.controls-grid.small{grid-template-columns:repeat(4,minmax(120px,1fr))}
.btn-go{background:#1db954;color:#fff;border:0;padding:16px 18px;border-radius:12px;font-weight:800;font-size:20px}
.btn-stop{background:#d64545;color:#fff;border:0;padding:16px 18px;border-radius:12px;font-weight:800;font-size:20px}
.btn-tag{background:#f0f3ff;border:1px solid #cfe0ff;border-radius:12px;padding:12px 14px;font-weight:800;color:#1f2b6d;font-size:16px}
.btn-tag[data-act="CO"]{background:#eaf9ff;border-color:#9ed6f5;color:#0b5a7a}
.btn-tag[data-act="CM"]{background:#ffeef0;border-color:#f5a6b0;color:#7a0b22}
.btn-tag[data-act="L"]{background:#eef8e9;border-color:#a6d98b;color:#1f5a0b}
.btn-tag[data-act="DE"]{background:#f5f0ff;border-color:#c5b4f5;color:#3b2a7a}
.btn-pause{background:#ffefcf;border:1px solid #ffd27a;border-radius:14px;padding:16px 18px;font-weight:800;color:#7a4b00;grid-column:2 / span 2;font-size:18px}
.btn-go:disabled,.btn-stop:disabled,.btn-tag:disabled,.btn-pause:disabled{opacity:.6;cursor:not-allowed}

.stats{margin-top:14px;color:#1c2a6d;font-size:16px}
.stats strong{color:#1f2b6d}
.stats .muted{color:#6f82c0;font-weight:600;letter-spacing:.3px;margin-left:4px}

/* Help text under buttons */
.help-list{margin:8px 0 0 0;padding-left:18px;color:#3956a6;font-size:14px}
.help-list li{margin:2px 0}

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

/* Dashboard */
.dash-filter .dash-filter-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dash-filter .icon-box{background:#7b2adf;color:#fff;border-radius:8px;padding:6px 8px;display:inline-flex;align-items:center;justify-content:center}
.dash-filter .title{font-weight:800;color:#6519d1}
.dash-filter-body{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.dash-filter-body .quick{display:flex;gap:8px;align-items:center}
.dash-filter-body .range{display:flex;gap:8px;align-items:center}
.dash-filter input[type=date]{padding:8px 10px;border:1px solid #cfe0ff;border-radius:8px}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.kpi-card{border:1px solid #e0e8ff;border-radius:12px;background:#fff;padding:16px;box-shadow:0 6px 18px rgba(31,87,191,0.08);display:flex;flex-direction:column;gap:6px}
.kpi-card .kpi-icon{font-size:22px}
.kpi-card .kpi-title{font-size:12px;color:#5a6bb7;font-weight:700;letter-spacing:.3px}
.kpi-card .kpi-value{font-size:22px;font-weight:900}
.kpi-work .kpi-value{color:#16a34a}
.kpi-pause .kpi-value{color:#f59e0b}
.kpi-active .kpi-value{color:#16a34a}
.kpi-warning .kpi-value{color:#f59e0b}
.kpi-complete .kpi-value{color:#ef4444}
.kpi-team .kpi-value{color:#1f57bf}
.kpi-archived .kpi-value{color:#64748b}
.kpi-holiday .kpi-value{color:#f59e0b}

.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.dash-panel{border:1px solid #e0e8ff;border-radius:12px;background:#fff;padding:16px;box-shadow:0 6px 18px rgba(31,87,191,0.08)}
.dash-panel-title{font-weight:800;color:#1c2a6d;margin-bottom:8px}
.alert-info{background:#e6f6ff;border:1px solid #bfe8ff;color:#0c4a6e;padding:12px;border-radius:10px}

@media (max-width: 1020px){
	.kpi-grid{grid-template-columns:repeat(2,1fr)}
	.dash-grid{grid-template-columns:1fr}
}

	/* Concedii list */
	.leave-head{position:relative}
	.leave-filters{margin-top:10px}
	.leave-filters .field{display:flex;flex-direction:column;gap:4px;min-width:220px}
	.leave-filters .field label{font-size:12px;color:#5a6bb7;font-weight:700}
	.leave-filters select,.leave-filters input[type=date],.leave-filters .search{padding:10px;border:1px solid #cfe0ff;border-radius:8px}
	.leave-filters .search{min-width:320px}
	.fab{position:absolute;top:10px;right:10px;background:#6b21a8;color:#fff;border:0;border-radius:50%;width:36px;height:36px;line-height:36px;text-align:center;font-size:20px;cursor:pointer;box-shadow:0 6px 18px rgba(31,87,191,0.18)}
	.notice{padding:10px 12px;border-radius:8px}
	.notice.success{background:#eef9f0;border:1px solid #b6e7c0;color:#075f26}
	.notice.info{background:#e6f6ff;border:1px solid #bfe8ff;color:#0c4a6e}

	/* Leave form */
	.leave-form .section-title{margin:0 0 8px 0;color:#1c2a6d}
	.leave-form .subsection{margin:14px 0 6px 0;color:#1c7d34;font-weight:800}
	.leave-form .sig-wrap{border:1px dashed #cfe0ff;border-radius:10px;overflow:hidden;background:#fafcff}
	.sig-canvas{width:100%;height:260px;display:block;cursor:crosshair}
	.form-row.wrap{flex-wrap:wrap}
	.field.grow{flex:1 1 320px}
	.field.small{max-width:180px}

	/* Action buttons in leaves table */
	.btn-approve{background:#e8fbef;border:1px solid #9be7b3;color:#0f6a2b;border-radius:8px;padding:6px 10px;font-weight:700}
	.btn-reject{background:#fff1f1;border:1px solid #f0a3a3;color:#7a0b0b;border-radius:8px;padding:6px 10px;font-weight:700}