/* ===========================================================
   ROOF-AID Back Office · App shell + components
   =========================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{font-family:'Montserrat',sans-serif;background:#F4F6FA;color:#0F1A2F;-webkit-font-smoothing:antialiased;font-size:14px;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

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

/* SIDEBAR */
.side{
  background:linear-gradient(180deg,#0F1A2F 0%, #1F2D44 100%);
  color:#C0CCDE;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.side .brand{
  display:flex;align-items:center;gap:10px;padding:18px 18px;border-bottom:1px solid rgba(255,255,255,.06);
}
.side .brand img{height:34px;border-radius:6px;}
.side .brand .name{color:#fff;font-weight:800;letter-spacing:.04em;font-size:15px;}
.side .brand .role{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#3399E5;font-weight:800;margin-top:2px;}

.side .grp{padding:18px 14px 6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#6B7894;font-weight:700;}
.side nav{display:flex;flex-direction:column;padding:0 10px;gap:2px;}
.side nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  color:#C0CCDE;font-size:13.5px;font-weight:600;transition:background .15s ease, color .15s ease;
}
.side nav a:hover{background:rgba(255,255,255,.05);color:#fff;}
.side nav a.active{background:linear-gradient(120deg,rgba(51,153,229,.18),rgba(51,153,229,.05));color:#fff;}
.side nav a.active::before{content:"";position:absolute;left:0;width:3px;height:18px;background:#3399E5;border-radius:0 3px 3px 0;}
.side nav a{position:relative;}
.side nav a svg{width:18px;height:18px;flex:0 0 18px;}
.side nav a .pill{margin-left:auto;font-size:10px;background:#3399E5;color:#fff;padding:2px 7px;border-radius:99px;font-weight:800;}

.side .user{
  margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:10px;
}
.side .user .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3399E5,#1668B5);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;}
.side .user .n{color:#fff;font-weight:700;font-size:13px;}
.side .user .e{color:#8B98B5;font-size:11px;}

/* TOPBAR */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:#fff;border-bottom:1px solid #E5E9F0;
  position:sticky;top:0;z-index:10;
}
.top .crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5E6C84;font-weight:700;}
.top .crumb b{color:#0F1A2F;}
.top .search{
  flex:1;max-width:480px;margin:0 28px;position:relative;
}
.top .search input{
  width:100%;padding:10px 14px 10px 38px;border:1.5px solid #E5E9F0;border-radius:10px;font-family:inherit;font-size:13px;background:#F4F6FA;outline:none;
}
.top .search input:focus{border-color:#3399E5;background:#fff;}
.top .search svg{position:absolute;left:12px;top:10px;width:16px;height:16px;color:#5E6C84;}
.top .right{display:flex;align-items:center;gap:14px;}
.top .icobtn{
  width:36px;height:36px;border-radius:10px;background:#F4F6FA;color:#1F2D44;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
}
.top .icobtn svg{width:18px;height:18px;}
.top .icobtn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;background:#E14B4B;border-radius:50%;border:2px solid #fff;}

/* MAIN */
.main{padding:28px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:16px;}
.page-head h1{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#0F1A2F;}
.page-head .sub{color:#5E6C84;font-size:13.5px;margin-top:4px;}
.page-head .actions{display:flex;gap:10px;}

/* BUTTON */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:9px;
  font-weight:700;font-size:13px;border:none;cursor:pointer;font-family:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn svg{width:15px;height:15px;}
.btn-primary{background:linear-gradient(135deg,#3399E5,#1668B5);color:#fff;}
.btn-ghost{background:#fff;color:#1F2D44;border:1.5px solid #E5E9F0;}
.btn-ghost:hover{border-color:#3399E5;color:#1668B5;}
.btn-danger{background:#FBE2E2;color:#9C2A2A;}

/* CARDS */
.card{background:#fff;border:1px solid #E5E9F0;border-radius:14px;padding:20px;}
.card .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card .h h3{font-size:15px;font-weight:800;color:#0F1A2F;letter-spacing:-.01em;}
.card .h .filter{font-size:11px;color:#5E6C84;font-weight:600;}

/* KPI GRID */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.kpi{
  background:#fff;border-radius:14px;padding:18px 20px;border:1px solid #E5E9F0;
  position:relative;overflow:hidden;
}
.kpi .ic{
  width:38px;height:38px;border-radius:10px;background:#E5F1FB;color:#1668B5;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.kpi.green .ic{background:#E4F6E0;color:#2C7A21;}
.kpi.amber .ic{background:#FCEFD0;color:#9C6B11;}
.kpi.red .ic{background:#FBE2E2;color:#9C2A2A;}
.kpi .ic svg{width:18px;height:18px;}
.kpi .l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5E6C84;font-weight:700;}
.kpi .v{font-size:28px;font-weight:900;color:#0F1A2F;margin-top:4px;letter-spacing:-.02em;line-height:1;}
.kpi .delta{font-size:12px;font-weight:700;margin-top:6px;color:#2C7A21;display:inline-flex;align-items:center;gap:4px;}
.kpi .delta.down{color:#9C2A2A;}
.kpi .delta svg{width:12px;height:12px;}

/* TABLE */
table.t{width:100%;border-collapse:collapse;font-size:13px;}
table.t th{
  text-align:left;padding:12px 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5E6C84;font-weight:700;
  border-bottom:1px solid #E5E9F0;background:#F7FAFD;
}
table.t td{padding:14px;border-bottom:1px solid #F0F2F7;color:#384256;vertical-align:middle;}
table.t tr:hover td{background:#FAFBFD;}
table.t td.name{font-weight:700;color:#0F1A2F;}
table.t td .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3399E5,#1668B5);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;margin-right:10px;vertical-align:middle;}
table.t td.actions{display:flex;gap:6px;}
table.t td.actions button{
  background:transparent;border:1px solid #E5E9F0;border-radius:8px;width:30px;height:30px;color:#5E6C84;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
table.t td.actions button:hover{border-color:#3399E5;color:#1668B5;}
table.t td.actions button svg{width:14px;height:14px;}

/* BADGES — reuse from brand.css */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#E5F1FB;color:#1668B5;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.badge.green{background:#E4F6E0;color:#2C7A21;}
.badge.amber{background:#FCEFD0;color:#9C6B11;}
.badge.red{background:#FBE2E2;color:#9C2A2A;}
.badge.navy{background:#E4E8EF;color:#1F2D44;}

/* GRID HELPERS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.grid-2-3{display:grid;grid-template-columns:2fr 1fr;gap:18px;}

/* KANBAN */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.col{
  background:#EEF1F7;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;
  min-height:600px;
}
.col .ch{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px;}
.col .ch .t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:#0F1A2F;}
.col .ch .t .pip{width:9px;height:9px;border-radius:50%;background:#3399E5;}
.col .ch .count{font-size:11px;background:#fff;border-radius:99px;padding:2px 8px;font-weight:700;color:#5E6C84;}
.col.c1 .ch .t .pip{background:#3399E5;}
.col.c2 .ch .t .pip{background:#5BBD4D;}
.col.c3 .ch .t .pip{background:#F5A524;}
.col.c4 .ch .t .pip{background:#1668B5;}
.col.c5 .ch .t .pip{background:#9C9C9C;}

.lcard{
  background:#fff;border-radius:10px;padding:12px;border:1px solid #E5E9F0;
  cursor:grab;transition:box-shadow .15s ease, transform .15s ease;
}
.lcard:hover{box-shadow:0 6px 18px rgba(15,26,47,.08);transform:translateY(-1px);}
.lcard .n{font-weight:800;color:#0F1A2F;font-size:13px;}
.lcard .c{font-size:12px;color:#5E6C84;margin-top:2px;}
.lcard .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.lcard .src{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5E6C84;font-weight:700;}
.lcard .amt{font-weight:800;color:#1F2D44;font-size:13px;}
.lcard .pills{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;}
.lcard .src-tag{font-size:10px;background:#EEF4FB;color:#1668B5;padding:2px 7px;border-radius:99px;font-weight:700;letter-spacing:.04em;}
.lcard .src-tag.meta{background:#EFE3FB;color:#5E2BC2;}
.lcard .src-tag.organic{background:#E4F6E0;color:#2C7A21;}
.lcard .src-tag.ref{background:#FCEFD0;color:#9C6B11;}
.lcard .av{width:24px;height:24px;border-radius:50%;background:#1F2D44;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;}

/* CALENDAR */
.cal{background:#fff;border-radius:14px;border:1px solid #E5E9F0;overflow:hidden;}
.cal .head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #E5E9F0;}
.cal .head .nav{display:flex;align-items:center;gap:8px;}
.cal .head .month{font-weight:800;font-size:18px;color:#0F1A2F;}
.cal .head .nav button{background:#F4F6FA;border:1px solid #E5E9F0;width:30px;height:30px;border-radius:8px;cursor:pointer;color:#1F2D44;display:flex;align-items:center;justify-content:center;}
.cal .week{display:grid;grid-template-columns:repeat(7,1fr);background:#F7FAFD;}
.cal .week div{padding:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5E6C84;font-weight:700;text-align:center;border-bottom:1px solid #E5E9F0;}
.cal .days{display:grid;grid-template-columns:repeat(7,1fr);}
.cal .day{
  min-height:106px;padding:6px;border-right:1px solid #F0F2F7;border-bottom:1px solid #F0F2F7;position:relative;background:#fff;
}
.cal .day:nth-child(7n){border-right:none;}
.cal .day.muted{background:#FAFBFD;color:#9AA6BE;}
.cal .day.today{background:linear-gradient(180deg,#EAF4FD 0%, #fff 70%);}
.cal .day .n{font-size:12px;color:#5E6C84;font-weight:700;}
.cal .day.today .n{color:#1668B5;font-weight:900;}
.cal .ev{
  font-size:10.5px;padding:3px 7px;margin-top:4px;border-radius:5px;background:#E5F1FB;color:#1668B5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;border-left:2px solid #1668B5;
}
.cal .ev.green{background:#E4F6E0;color:#2C7A21;border-left-color:#5BBD4D;}
.cal .ev.amber{background:#FCEFD0;color:#9C6B11;border-left-color:#F5A524;}
.cal .ev.red{background:#FBE2E2;color:#9C2A2A;border-left-color:#E14B4B;}
.cal .ev.navy{background:#E4E8EF;color:#1F2D44;border-left-color:#1F2D44;}

/* CHART placeholder */
.chart{width:100%;height:220px;}

/* TABS */
.tabs{display:flex;gap:2px;background:#F4F6FA;padding:4px;border-radius:10px;width:fit-content;margin-bottom:18px;}
.tabs a{padding:8px 14px;font-size:12.5px;font-weight:700;color:#5E6C84;border-radius:8px;}
.tabs a.active{background:#fff;color:#1F2D44;box-shadow:0 1px 3px rgba(15,26,47,.06);}

/* FIELD */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#1F2D44;}
.field input,.field select{border:1.5px solid #E5E9F0;background:#fff;border-radius:8px;padding:9px 11px;font-family:inherit;font-size:13px;outline:none;}
.field input:focus,.field select:focus{border-color:#3399E5;}

/* SOURCE PILLS */
.src-list{display:flex;flex-direction:column;gap:10px;}
.src-list .src{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;}
.src-list .src .ic{width:28px;height:28px;border-radius:8px;background:#EEF4FB;color:#1668B5;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;}
.src-list .src.meta .ic{background:#EFE3FB;color:#5E2BC2;}
.src-list .src.org .ic{background:#E4F6E0;color:#2C7A21;}
.src-list .src.ref .ic{background:#FCEFD0;color:#9C6B11;}
.src-list .src .info{flex:1;}
.src-list .src .info .n{font-weight:700;color:#0F1A2F;font-size:13px;}
.src-list .src .info .bar{height:5px;background:#EEF1F7;border-radius:99px;margin-top:5px;overflow:hidden;}
.src-list .src .info .bar > div{height:100%;background:linear-gradient(90deg,#3399E5,#1668B5);}
.src-list .src .v{font-weight:800;color:#1F2D44;font-size:13px;text-align:right;min-width:70px;}

/* LOGIN */
.login-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
.login-wrap .left{background:linear-gradient(160deg,#0F1A2F,#1F2D44);color:#fff;padding:50px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.login-wrap .left::after{content:"";position:absolute;right:-100px;bottom:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(51,153,229,.3),transparent 65%);}
.login-wrap .left .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.04em;font-size:18px;}
.login-wrap .left .brand img{height:38px;border-radius:6px;}
.login-wrap .left h1{font-size:44px;line-height:1.05;letter-spacing:-.02em;color:#fff;font-weight:800;}
.login-wrap .left h1 .hl{color:#3399E5;}
.login-wrap .left .quote{color:#9AA6BE;font-size:14px;max-width:380px;line-height:1.5;}
.login-wrap .right{display:flex;align-items:center;justify-content:center;padding:40px;background:#fff;}
.login-wrap .form{width:100%;max-width:380px;}
.login-wrap .form h2{font-size:26px;color:#0F1A2F;letter-spacing:-.02em;}
.login-wrap .form .sub{color:#5E6C84;font-size:13px;margin-top:6px;margin-bottom:24px;}

/* RESPONSIVE */
@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .side{display:none;}
  .kpis,.grid-2,.grid-3,.grid-4,.grid-2-3{grid-template-columns:1fr;}
  .kanban{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
  .login-wrap{grid-template-columns:1fr;}
  .login-wrap .left{display:none;}
}

/* ===== LANGUAGE SWITCHER (back office) ===== */
.lang{
  display:inline-flex;border:1px solid #E5E9F0;border-radius:99px;overflow:hidden;font-size:11px;font-weight:800;letter-spacing:.08em;
  background:#F4F6FA;
}
.lang button{
  background:transparent;border:none;cursor:pointer;font-family:inherit;font-weight:800;
  padding:6px 12px;color:#5E6C84;
}
.lang button.on{background:#1F2D44;color:#fff;}