:root{
  --primary:#6f6f6f;
  --text:#111111;
  --accent:#f4f4f4;
  --bg:#818181;
  --card:#ffffff;
  --border:rgba(0,0,0,0.16);
  --orange:#ed7d31;
  --green:#0c8241;
  --red:#c00000;
  --shadow:0 10px 24px rgba(0,0,0,0.10);
  --radius:14px;
  --radius-sm:10px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
}

a{ color:inherit; text-decoration:none; }

/* App shell */
.app{ min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  flex-wrap:nowrap;
}

/* Icon buttons in header */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.95);
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  line-height:1;
}
.icon-btn:hover{ background:rgba(0,0,0,0.03); }
.icon-btn:active{ transform:translateY(0.5px); }
.icon-svg{ width:20px; height:20px; }

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-logo{ height:36px; width:auto; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-title{ font-weight:800; letter-spacing:0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub{ font-size:12px; opacity:0.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 720px){
  .brand-sub{ display:none; }
}
@media (max-width: 520px){
  .brand-text{ display:none; }
}

.topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
}
[dir="rtl"] .topbar-actions{ margin-left:0; margin-right:auto; }

/* Notification badge */
.notif-btn{ position:relative; }
.notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
}
[dir="rtl"] .notif-badge{ right:auto; left:-6px; }

/* Header user button */
.user-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.95);
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  max-width:240px;
  min-width:0;
}
.user-btn:hover{ background:rgba(0,0,0,0.03); }
.avatar{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(165,61,76,0.12);
  border:1px solid rgba(165,61,76,0.25);
  color:var(--primary);
  font-weight:900;
  flex:0 0 30px;
}
.user-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width: 520px){
  .user-name{ display:none; }
}

/* Language dropdown */
details.dropdown{ position:relative; }
details.dropdown > summary{ list-style:none; }
details.dropdown > summary::-webkit-details-marker{ display:none; }
.dropdown-label{ font-weight:900; }
details.dropdown .dropdown-menu{ display:none !important; }
details.dropdown[open] .dropdown-menu{ display:block !important; }
.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:170px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px;
  z-index:50;
}
[dir="rtl"] .dropdown-menu{ right:auto; left:0; }
.dd-item{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  font-weight:900;
}
.dd-item:hover{ background:rgba(202,182,153,0.18); }
.dd-item.active{ background:rgba(165,61,76,0.10); }

.main{ display:flex; align-items:stretch; min-height:calc(100vh - 62px); }

/* Sidebar */
.sidebar{
  width:260px;
  flex:0 0 260px;
  background:#a63d4c;
  color:var(--accent);
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,0.18);
}
[dir="rtl"] .sidebar{ border-right:none; border-left:1px solid rgba(255,255,255,0.18); }

.sidebar-header{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.sidebar-title{ font-weight:900; letter-spacing:0.4px; }
.sidebar-sub{ font-size:12px; opacity:0.95; margin-top:4px; }

.nav{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.nav-item{
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  color:var(--accent);
  font-weight:700;
}
.nav-item:hover{ background:rgba(255,255,255,0.08); }
.nav-item.active{ background:rgba(255,255,255,0.14); }

.nav-group{ display:flex; flex-direction:column; gap:6px; }
.nav-group.is-active > .nav-item{ background:rgba(255,255,255,0.14); }
.nav-children{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-inline-start:14px;
  padding-inline-start:10px;
  border-inline-start:1px solid rgba(255,255,255,0.18);
}
.nav-item.child{
  padding-top:8px;
  padding-bottom:8px;
  font-size:14px;
  font-weight:700;
}

.nav-sep{
  height:1px;
  background:rgba(255,255,255,0.18);
  margin:10px 6px;
}

.nav-item.nav-logout{
  background:rgba(255,255,255,0.08);
}
.nav-item.nav-logout:hover{ background:rgba(255,255,255,0.14); }

.sidebar-footer{
  margin-top:auto;
  padding:12px 16px 16px;
  border-top:1px solid rgba(255,255,255,0.18);
}
.copyright{ font-size:12px; opacity:0.95; }

/* Content */
.content{ flex:1; padding:18px clamp(14px, 2.2vw, 24px); min-width:0; width:100%; }

.card{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin-bottom:16px;
}
.card h2, .card h3{ margin:0 0 10px; }

.muted{ opacity:0.78; }
.small{ font-size:12px; }

/* Metro tiles */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
.kpi-tile{
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:12px;
  box-shadow:0 2px 0 rgba(0,0,0,0.02);
  min-width:0;
}
.kpi-tile:hover{ background:rgba(202,182,153,0.12); }
.kpi-label{ font-weight:800; font-size:13px; opacity:0.9; }
.kpi-value{ font-size:26px; font-weight:900; margin-top:6px; line-height:1; }
.kpi-hint{ margin-top:8px; font-size:12px; opacity:0.85; }

@media (max-width: 520px){
  .kpi-row{ gap:8px; }
  .kpi-tile{ padding:10px; }
  .kpi-value{ font-size:22px; }
  .kpi-label{ font-size:12px; }
}

/* Department list on dashboard */
.dept-list{ display:flex; flex-direction:column; gap:10px; }
.dept-row{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:12px;
}
.dept-row-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.dept-name{ font-weight:900; }
.dept-meta{ font-size:12px; opacity:0.82; margin-top:2px; }

.dept-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
.dept-stat{
  border:1px solid rgba(202,182,153,0.35);
  border-radius:10px;
  padding:10px;
  background:rgba(202,182,153,0.10);
  min-width:0;
}
.dept-stat .label{ font-size:12px; opacity:0.85; font-weight:800; }
.dept-stat .value{ font-size:18px; font-weight:900; margin-top:4px; }

.progress{
  height:10px;
  border-radius:999px;
  background:rgba(93,87,84,0.12);
  overflow:hidden;
  margin-top:10px;
}
.progress > .bar{
  height:100%;
  width:0;
  background:var(--primary);
}

/* Grid */
.grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:14px; width:100%; }
.col-12{ grid-column:span 12; }
.col-6{ grid-column:span 6; }
.col-5{ grid-column:span 5; }
.col-4{ grid-column:span 4; }
.col-3{ grid-column:span 3; }
.col-2{ grid-column:span 2; }

@media (max-width: 1100px){
  .col-6{ grid-column:span 12; }
  .col-5{ grid-column:span 6; }
  .col-4{ grid-column:span 6; }
  .col-3{ grid-column:span 6; }
  .col-2{ grid-column:span 12; }
}

@media (max-width: 700px){
  .col-6,
  .col-5,
  .col-4,
  .col-3,
  .col-2{
    grid-column:span 12;
  }
}

/* Buttons / chips */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:10px 14px;
  border-radius:12px;
  border:2px solid rgba(17,17,17,0.10);
  background:#f8fafc;
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  text-align:center;
}
.btn:hover{ background:#f1f5f9; }
.btn.primary{ background:#f7e6e8; border-color:rgba(166,61,76,0.35); color:#7c2534; }
.btn.success{ background:#e8f5ee; border-color:rgba(12,130,65,0.35); color:#0c8241; }
.btn.danger{ background:#f9e8eb; color:#a63d4c; border-color:rgba(166,61,76,0.35); }
.btn.accent{ background:#fff1e6; color:#b65f18; border-color:rgba(237,125,49,0.35); }
.btn.small{ min-height:38px; padding:8px 12px; border-radius:10px; font-size:13px; }

.page-back-btn{
  width:auto !important;
  min-height:36px;
  padding:7px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.1;
  white-space:nowrap;
  flex:0 0 auto;
  margin-inline-start:auto;
}

.chip{
  display:inline-flex;
  align-items:center;
  border:2px solid rgba(17,17,17,0.08);
  background:#f8fafc;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
}
.chip.danger{ background:#f9e8eb; color:#a63d4c; border-color:rgba(166,61,76,0.35); }
.chip-count{
  min-width:24px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(165,61,76,0.12);
  border:1px solid rgba(165,61,76,0.25);
  font-size:12px;
  text-align:center;
}

/* Forms */
.form{ display:flex; flex-direction:column; gap:10px; }
.field{ display:flex; flex-direction:column; gap:6px; }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="email"],
select,
textarea{
  width:100%;
  min-height:46px;
  padding:11px 14px;
  border-radius:12px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
  font-size:15px;
}
textarea{ min-height:110px; resize:vertical; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus{
  border-color:rgba(166,61,76,0.42);
  box-shadow:0 0 0 4px rgba(166,61,76,0.10);
}

.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.checkbox{ display:flex; gap:10px; align-items:center; }
.checkbox input{ width:18px; height:18px; }

/* Project create / milestone layout */
.project-create-milestones{ width:100%; }
.milestone-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.milestone-note{
  margin-top:6px;
  font-size:12px;
  opacity:0.78;
}
.milestone-total{
  margin-top:6px;
  font-size:12px;
  opacity:0.78;
}
.milestone-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.milestone-card{
  padding:14px;
}
.milestone-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 180px);
  gap:14px;
  align-items:end;
  width:100%;
}
.milestone-field{
  min-width:0;
}
.milestone-field > span{
  display:block;
  min-width:0;
  line-height:1.35;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}
.milestone-field--percentage input{
  text-align:center;
}
.milestone-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.milestone-remove-button{
  width:auto !important;
  min-width:120px;
  flex:0 0 auto;
}

.flash-wrap{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.flash{ padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; }
.flash.success{ border-color:rgba(12,130,65,0.35); background:rgba(12,130,65,0.08); }
.flash.danger{ border-color:rgba(179,59,59,0.35); background:rgba(179,59,59,0.07); }
.flash.info{ border-color:rgba(2,136,209,0.35); background:rgba(2,136,209,0.07); }

/* Tables */
.table-wrap{ overflow:auto; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--card); width:100%; }
table{ width:100%; border-collapse:collapse; }
th, td{ padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
[dir="rtl"] th, [dir="rtl"] td{ text-align:right; }
th{ font-size:12px; text-transform:uppercase; letter-spacing:0.04em; opacity:0.9; }
tr:last-child td{ border-bottom:none; }

.badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:900;
}
.badge.approved{ background:rgb(46, 125, 50); border-color:rgb(46, 125, 50); color:#ffffff; }
.badge.rejected{ background:rgba(179,59,59,0.12); border-color:rgba(179,59,59,0.25); }
.badge.pending{ background:rgba(111,111,111,0.14); border-color:rgba(111,111,111,0.30); }
.badge.requested{ background:rgba(237,125,49,0.16); border-color:rgba(237,125,49,0.32); }
.badge.in_progress{ background:rgba(237,125,49,0.16); border-color:rgba(237,125,49,0.32); }
.badge.completed{ background:rgb(46, 125, 50); border-color:rgb(46, 125, 50); color:#ffffff; }
.badge.not_started{ background:rgba(93,87,84,0.10); border-color:rgba(93,87,84,0.22); }

hr.sep{ border:none; border-top:1px dashed rgba(202,182,153,0.65); margin:12px 0; }

/* Segmented tabs */
.segmented{
  display:inline-flex;
  gap:0;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  flex-wrap:wrap;
}
.segmented a{
  padding:8px 12px;
  font-weight:900;
  font-size:13px;
  border-right:1px solid var(--border);
}
[dir="rtl"] .segmented a{ border-right:none; border-left:1px solid var(--border); }
.segmented a:last-child{ border-right:none; }
[dir="rtl"] .segmented a:last-child{ border-left:none; }
.segmented a.active{ background:rgba(165,61,76,0.10); }

/* Cards grid (suppliers etc.) */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .cards-grid{ grid-template-columns: 1fr; }
}

.mini-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  min-width:0;
}
.mini-card .title{ font-weight:900; }
.mini-card .line{ margin-top:6px; font-size:13px; opacity:0.9; word-break:break-word; }

/* Responsive sidebar */
@media (max-width: 900px){
  .sidebar{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    transform:translateX(-110%);
    transition:transform 180ms ease;
    z-index:40;
    box-shadow:0 18px 35px rgba(0,0,0,0.25);
  }
  [dir="rtl"] .sidebar{
    left:auto;
    right:0;
    transform:translateX(110%);
  }
  .sidebar.open{ transform:translateX(0); }
  .main{ min-height:auto; }
  .content{ padding:14px; }
  .card{ padding:15px; margin-bottom:14px; }
  .row{ gap:10px; }
  .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:30; }
  .milestone-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  }
  .milestone-field--percentage{
    grid-column:1 / -1;
  }
}

@media (max-width: 640px){
  .milestone-grid{
    grid-template-columns:1fr;
  }
  .milestone-field--percentage{
    grid-column:auto;
  }
  .milestone-toolbar{
    align-items:stretch;
  }
  .milestone-toolbar .btn{
    width:100%;
  }
}

/* Login */
.login-body{
  min-height:100vh;
  background:#111;
}
.login-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.login-overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg, rgba(165,61,76,0.55), rgba(0,0,0,0.55));
  z-index:1;
}
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  position:relative;
  z-index:2;
}
.login-card{
  width:100%;
  max-width:460px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.login-brand{ text-align:center; margin-bottom:10px; }
.login-logo{ height:70px; width:auto; object-fit:contain; }
.login-title{ font-size:18px; font-weight:900; margin-top:10px; }
.login-sub{ margin-top:6px; opacity:0.88; }
.login-footer{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Splash */
.splash{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  z-index:100;
  transition:opacity 350ms ease;
}
.splash video,
.splash img{
  max-width:min(90vw, 520px);
  height:auto;
  object-fit:contain;
}
.splash.hide{ opacity:0; pointer-events:none; }

/* Mobile tables to cards */
@media (max-width: 650px){
  table.responsive thead{ display:none; }
  table.responsive,
  table.responsive tbody,
  table.responsive tr,
  table.responsive td{ display:block; width:100%; }
  table.responsive tr{ border-bottom:1px solid var(--border); padding:10px 10px; }
  table.responsive td{
    border:none;
    padding:7px 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:6px;
  }
  table.responsive td::before{ content:attr(data-label); font-weight:900; opacity:0.85; }
  .row{ align-items:stretch; }
  .row > .btn,
  .row > form{ width:100%; }
  .row > form .btn{ width:100%; }
}

/* Prevent horizontal scroll globally */
img, video{ max-width:100%; height:auto; }

.kpi-tile-soft{ background:rgba(202,182,153,0.18); border-color:rgba(202,182,153,0.45); }
.kpi-tile-soft:hover{ background:rgba(202,182,153,0.24); }

@keyframes uiFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.motion-ready{ opacity:0; transform:translateY(18px); }
.motion-ready.is-visible{ animation:uiFadeUp .55s cubic-bezier(.22,1,.36,1) forwards; }

.nav-item, .btn, .card, .mini-card, .dept-row{ transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease; }
.card:hover, .mini-card:hover{ transform:translateY(-2px); }

/* Fix language dropdown */
.language-menu details{
  position:relative;
}

.language-menu summary{
  list-style:none;
  cursor:pointer;
}

.language-menu summary::-webkit-details-marker{
  display:none;
}

.language-menu details[open] .dropdown-menu{
  display:block !important;
}

.language-menu .dropdown-menu{
  position:absolute;
  right:0;
  top:42px;
  min-width:120px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
  padding:6px 0;
  z-index:9999;
}

.field > span{
  font-weight:800;
}

.checkbox{
  padding:8px 10px;
  border:1.5px solid rgba(0,0,0,0.10);
  border-radius:12px;
  background:#fbfbfb;
}

.segmented{
  flex-wrap:wrap;
}

.table-row-completed{
  background:#0c8241;
}
.table-row-completed td,
.table-row-completed td .muted,
.table-row-completed td strong,
.table-row-completed td a:not(.btn),
.table-row-completed td .badge{
  color:#ffffff !important;
}
.table-row-completed td{ border-bottom-color:rgba(255,255,255,0.18); }
.table-row-completed .badge.approved,
.table-row-completed .badge.completed,
.table-row-completed .badge.not_started,
.table-row-completed .badge.in_progress,
.table-row-completed .badge.requested,
.table-row-completed .badge.pending,
.table-row-completed .badge.rejected{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.28);
  color:#ffffff;
}

.table-row-overdue{
  background:#a63d4c;
}
.table-row-overdue td,
.table-row-overdue td .muted,
.table-row-overdue td strong,
.table-row-overdue td a:not(.btn),
.table-row-overdue td .badge{
  color:#ffffff !important;
}
.table-row-overdue td{ border-bottom-color:rgba(255,255,255,0.18); }
.table-row-overdue .badge.approved,
.table-row-overdue .badge.completed,
.table-row-overdue .badge.not_started,
.table-row-overdue .badge.in_progress,
.table-row-overdue .badge.requested,
.table-row-overdue .badge.pending,
.table-row-overdue .badge.rejected{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.28);
  color:#ffffff;
}

.live-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:11px;
  height:11px;
  border-radius:999px;
  background:#0c8241;
  box-shadow:0 0 0 4px rgba(12,130,65,0.14);
  flex:0 0 auto;
}
.live-indicator.with-label{
  width:auto;
  height:auto;
  padding:6px 10px;
  gap:8px;
  border-radius:999px;
  box-shadow:none;
  background:#e8f5ee;
  border:2px solid rgba(12,130,65,0.24);
  color:#0c8241;
  font-size:12px;
  font-weight:900;
}
.live-indicator.with-label::before{
  content:'';
  width:10px;
  height:10px;
  border-radius:999px;
  background:#0c8241;
  box-shadow:0 0 0 4px rgba(12,130,65,0.14);
}
.live-indicator.is-off{
  background:#f3f4f6;
  box-shadow:none;
  border:2px solid rgba(17,17,17,0.08);
  color:#6b7280;
}
.live-indicator.is-off::before{ background:#9ca3af; box-shadow:none; }

.live-indicator-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#0c8241;
  box-shadow:0 0 0 4px rgba(12,130,65,0.14);
}
.live-indicator-text{
  font-size:11px;
  font-weight:900;
  color:#0c8241;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.live-provider-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef8f0;
  border:1.5px solid rgba(12,130,65,0.22);
  color:#0c8241;
  font-size:12px;
  font-weight:900;
}

.mobile-openable{
  position:relative;
}
@media (max-width: 767px){
  .mobile-openable{ cursor:pointer; }
}

.metric-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f7f7f7;
  border:1.5px solid rgba(0,0,0,0.10);
  font-weight:800;
}

.biometric-setup-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,0.45);
  z-index:120;
}
.biometric-setup-modal[hidden]{
  display:none !important;
}
.biometric-setup-dialog{
  width:min(100%, 420px);
  background:#ffffff;
  border-radius:18px;
  border:1.5px solid var(--border);
  box-shadow:0 22px 55px rgba(0,0,0,0.22);
  padding:20px;
}
.biometric-setup-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.biometric-setup-actions .btn,
.biometric-setup-actions form{
  flex:1 1 160px;
}
.biometric-setup-message{
  margin-top:12px;
}

.kpi-score-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:8px 12px;
  border-radius:999px;
  background:#eef8f0;
  border:1.5px solid rgba(12,130,65,0.20);
  color:#0c8241;
  font-weight:900;
}

.mobile-open-row{ cursor:pointer; }
.mobile-open-row:hover{ box-shadow:0 10px 22px rgba(0,0,0,0.07); }
.table-status-completed{ background:#0c8241; color:#fff; }
.table-status-overdue{ background:#a63d4c; color:#fff; }
.table-status-completed .muted,
.table-status-overdue .muted,
.table-status-completed .small,
.table-status-overdue .small{ color:rgba(255,255,255,0.92); opacity:1; }
.table-status-completed a,
.table-status-overdue a{ color:inherit; }
.table-status-completed .btn,
.table-status-overdue .btn,
.table-status-completed .chip,
.table-status-overdue .chip{ background:rgba(255,255,255,0.16); color:#fff; border-color:rgba(255,255,255,0.32); }

.stat-count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  padding:6px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:2px solid rgba(17,17,17,0.08);
  font-weight:900;
}
.field-note{ margin-top:6px; }

.kpi-auto-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.kpi-auto-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px;
}
.kpi-auto-card .label{ font-size:12px; font-weight:800; opacity:0.82; }
.kpi-auto-card .value{ margin-top:6px; font-size:22px; font-weight:900; }

@media (max-width: 900px){
  .kpi-auto-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .btn{ width:100%; }
  .segmented{ width:100%; border-radius:16px; }
  .segmented a{
    flex:1 1 48%;
    text-align:center;
    border-bottom:1px solid var(--border);
  }
  .segmented a:nth-last-child(-n+2){ border-bottom:none; }
  .kpi-auto-grid{ grid-template-columns:1fr; }
}


.department-subdepartment-showcase-card{
  padding-top:18px;
}
.department-subdepartment-showcase-card:hover{
  transform:none;
}
.subdepartment-showcase-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.subdepartment-showcase-item{
  display:grid;
  grid-template-columns:minmax(96px, 240px) minmax(0, 1fr) minmax(96px, 215px) minmax(96px, 215px);
  grid-template-areas:"total name ongoing completed";
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:28px;
  background:#d4d1d1;
  text-decoration:none;
  color:#111;
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  direction:ltr;
}
.subdepartment-showcase-item.has-income{
  grid-template-columns:minmax(90px, 180px) minmax(0, 1fr) minmax(118px, 210px) minmax(90px, 180px) minmax(90px, 180px);
  grid-template-areas:"total name income ongoing completed";
}
.subdepartment-showcase-item:visited{
  color:#111;
}
.subdepartment-showcase-item:hover,
.subdepartment-showcase-item:focus-visible{
  color:#111;
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(15,23,42,0.12);
  filter:brightness(.99);
}
.subdepartment-showcase-item:focus-visible{
  outline:3px solid rgba(237,125,49,0.24);
  outline-offset:3px;
}
.subdepartment-showcase-item.is-static{
  cursor:default;
}
.subdepartment-showcase-item.is-static:hover,
.subdepartment-showcase-item.is-static:focus-visible{
  transform:none;
  filter:none;
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  outline:none;
}
.subdepartment-showcase-name{
  grid-area:name;
  min-width:0;
  text-align:center;
  font-size:clamp(20px, 1.8vw, 28px);
  font-weight:900;
  line-height:1.18;
  color:#000;
}
html[dir="rtl"] .subdepartment-showcase-name{
  direction:rtl;
}
.subdepartment-showcase-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:34px;
  padding:8px 16px;
  border-radius:999px;
  font-size:22px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.subdepartment-showcase-pill.is-total{
  grid-area:total;
  background:#fff;
  color:#111;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,0.06);
}
.subdepartment-showcase-pill.is-ongoing{
  grid-area:ongoing;
  background:#ed7d31;
  color:#fff;
}
.subdepartment-showcase-pill.is-income{
  grid-area:income;
  background:#a63d4c;
  color:#fff;
  gap:4px;
  padding-inline:10px;
  font-size:16px;
}
.subdepartment-showcase-pill.is-income .finance-symbol{
  font-size:11px;
  line-height:1;
  flex:0 0 auto;
}
.subdepartment-showcase-pill.is-income .finance-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subdepartment-showcase-pill.is-completed{
  grid-area:completed;
  background:#148841;
  color:#fff;
}
.subdepartment-task-showcase-list{
  margin-top:16px;
}
.subdepartment-showcase-item.is-task-row .subdepartment-showcase-name{
  display:flex;
  align-items:center;
  justify-content:center;
}
.subdepartment-task-title{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
  max-width:100%;
  text-align:center;
}
.subdepartment-task-title-text{
  min-width:0;
  white-space:normal;
  word-break:break-word;
}
.subdepartment-task-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.42em;
  font-weight:800;
  line-height:1.05;
  letter-spacing:0.01em;
  color:#5f6368;
  white-space:nowrap;
  vertical-align:middle;
}
.subdepartment-task-status.is-completed{
  color:#0c8241;
}
.subdepartment-task-status.is-delayed{
  color:#b42318;
}
.subdepartment-task-status.is-under-process{
  color:#b45309;
}
.subdepartment-task-status.is-not-started{
  color:#667085;
}
.subdepartment-showcase-item.is-task-row .subdepartment-showcase-pill{
  min-height:40px;
  padding:10px 14px;
  font-size:15px;
  line-height:1.2;
  white-space:normal;
  text-align:center;
}
.subdepartment-showcase-item.is-task-row .subdepartment-showcase-pill.is-total{
  font-size:18px;
  white-space:nowrap;
}
.subdepartment-showcase-item.is-task-row .subdepartment-showcase-name{
  font-size:clamp(18px, 1.6vw, 24px);
}
@media (max-width: 820px){
  .subdepartment-task-status{
    font-size:0.48em;
  }
}
@media (max-width: 560px){
  .subdepartment-task-title{
    gap:6px;
  }
  .subdepartment-task-status{
    font-size:0.52em;
  }
}
@media (max-width: 1100px){
  .subdepartment-showcase-item{
    grid-template-columns:minmax(88px, 180px) minmax(0, 1fr) minmax(88px, 170px) minmax(88px, 170px);
  }
  .subdepartment-showcase-item.has-income{
    grid-template-columns:minmax(84px, 150px) minmax(0, 1fr) minmax(110px, 180px) minmax(84px, 150px) minmax(84px, 150px);
  }
  .subdepartment-showcase-name{
    font-size:clamp(18px, 1.8vw, 24px);
  }
  .subdepartment-showcase-pill{
    font-size:20px;
  }
  .subdepartment-showcase-pill.is-income{
    font-size:15px;
  }
}
@media (max-width: 820px){
  .subdepartment-showcase-item{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "name name name"
      "total ongoing completed";
    gap:10px;
    padding:12px;
  }
  .subdepartment-showcase-item.has-income{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "name name name name"
      "total income ongoing completed";
  }
  .subdepartment-showcase-name{
    font-size:clamp(18px, 4vw, 22px);
  }
  .subdepartment-showcase-pill.is-income{
    font-size:14px;
  }
}
@media (max-width: 560px){
  .subdepartment-showcase-item{
    border-radius:22px;
    padding:10px;
  }
  .subdepartment-showcase-name{
    font-size:18px;
  }
  .subdepartment-showcase-pill{
    min-height:32px;
    padding:7px 10px;
    font-size:18px;
  }
  .subdepartment-showcase-pill.is-income{
    font-size:12px;
    padding-inline:8px;
  }
  .subdepartment-showcase-pill.is-income .finance-symbol{
    font-size:9px;
  }

  .subdepartment-showcase-item:not(.is-task-row){
    gap:6px;
    padding:6px 8px;
    border-radius:20px;
    min-height:44px;
    grid-template-columns:minmax(56px, 68px) minmax(0, 1fr) minmax(50px, 58px) minmax(50px, 58px);
    grid-template-areas:"total name ongoing completed";
  }
  .subdepartment-showcase-item.has-income:not(.is-task-row){
    grid-template-columns:minmax(56px, 68px) minmax(0, 1fr) minmax(88px, 96px) minmax(50px, 58px) minmax(50px, 58px);
    grid-template-areas:"total name income ongoing completed";
  }
  .subdepartment-showcase-item:not(.is-task-row) .subdepartment-showcase-name{
    font-size:15px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .subdepartment-showcase-item:not(.is-task-row) .subdepartment-showcase-pill{
    min-height:30px;
    padding:4px 6px;
    border-radius:14px;
    font-size:14px;
  }
  .subdepartment-showcase-item.has-income:not(.is-task-row) .subdepartment-showcase-pill.is-income{
    font-size:12px;
    padding-inline:6px;
  }
  .subdepartment-showcase-item.has-income:not(.is-task-row) .subdepartment-showcase-pill.is-income .finance-symbol{
    font-size:10px;
  }
}

@media (max-width: 390px){
  .subdepartment-showcase-item:not(.is-task-row){
    gap:5px;
    padding:6px;
    grid-template-columns:minmax(52px, 62px) minmax(0, 1fr) minmax(48px, 56px) minmax(48px, 56px);
  }
  .subdepartment-showcase-item.has-income:not(.is-task-row){
    grid-template-columns:minmax(52px, 62px) minmax(0, 1fr) minmax(82px, 90px) minmax(46px, 54px) minmax(46px, 54px);
  }
  .subdepartment-showcase-item:not(.is-task-row) .subdepartment-showcase-name{
    font-size:14px;
  }
  .subdepartment-showcase-item:not(.is-task-row) .subdepartment-showcase-pill{
    font-size:14px;
  }
  .subdepartment-showcase-item.has-income:not(.is-task-row) .subdepartment-showcase-pill.is-income{
    font-size:11px;
  }
}


/* Human Resources module */
.hr-page{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
  min-width:0;
}
.hr-page > .card{
  margin-bottom:0;
  width:100%;
}
.hr-page .card{
  padding:clamp(18px, 2.3vw, 28px);
}
.hr-page .row{
  gap:14px;
}
.hr-page .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  align-items:start;
  width:100%;
}
.hr-page .grid > [class^="col-"],
.hr-page .grid > [class*=" col-"]{
  grid-column:auto !important;
  width:100%;
  min-width:0;
}
.hr-page .grid > .col-12{
  grid-column:1 / -1 !important;
}
.hr-page .grid > div{
  min-width:0;
}
.hr-page .field{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:100%;
}
.hr-page .field > span{
  display:block;
  width:100%;
  font-size:15px;
  line-height:1.45;
  font-weight:800;
}
.hr-page input[type="text"],
.hr-page input[type="password"],
.hr-page input[type="number"],
.hr-page input[type="date"],
.hr-page input[type="datetime-local"],
.hr-page input[type="month"],
.hr-page input[type="email"],
.hr-page select,
.hr-page textarea{
  width:100%;
  min-width:0;
  min-height:60px;
  padding:16px 18px;
  border-radius:16px;
  font-size:16px;
}
.hr-page textarea{
  min-height:170px;
}
.hr-page input[disabled],
.hr-page select[disabled],
.hr-page textarea[disabled]{
  background:#f8fafc;
  color:rgba(17,17,17,0.72);
  cursor:not-allowed;
}
.hr-page .btn{
  min-height:50px;
  min-width:140px;
}
.hr-page .table-wrap{
  width:100%;
}
.hr-request-date-range.is-hidden{
  display:none !important;
}
.hr-review-inline{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:260px;
}
.hr-page .hr-review-inline{
  width:min(100%, 400px);
  min-width:0;
}
.hr-review-inline textarea{
  min-height:84px;
  resize:vertical;
}
.hr-page .hr-review-inline textarea{
  min-height:112px;
}
.hr-checkbox-field{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:60px;
}
.hr-page .hr-checkbox-field{
  padding:0 16px;
  border:1.5px solid var(--border);
  border-radius:16px;
  background:#fff;
}
.hr-page .hr-checkbox-field span{
  flex:1 1 auto;
}
.hr-checkbox-field input[type="checkbox"]{
  width:20px;
  height:20px;
  margin:0;
  flex:0 0 auto;
}
.hr-page .hr-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.hr-page .hr-form-actions .btn,
.hr-page .hr-form-actions > .btn,
.hr-page .hr-form-actions > form{
  flex:0 1 auto;
}
@media (max-width: 960px){
  .hr-page .segmented{
    display:flex;
    width:100%;
    border-radius:18px;
  }
  .hr-page .segmented a{
    flex:1 1 180px;
    text-align:center;
  }
}
@media (max-width: 768px){
  .hr-page{
    gap:14px;
  }
  .hr-page .card{
    padding:16px;
  }
  .hr-page .grid{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
  }
  .hr-page .hr-review-inline{
    width:100%;
  }
}
@media (max-width: 640px){
  .hr-page .grid{
    grid-template-columns:1fr;
  }
  .hr-page .row{
    align-items:stretch;
  }
  .hr-page .row > .btn,
  .hr-page .row > a.btn,
  .hr-page .row > form,
  .hr-page .hr-form-actions > .btn,
  .hr-page .hr-form-actions > a.btn,
  .hr-page .hr-form-actions > form{
    flex:1 1 100%;
    width:100%;
  }
}


.card.hr-modal-host:hover{
  transform:none;
}

.hr-showcase-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.hr-showcase-item{
  display:grid;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:28px;
  background:#d4d1d1;
  color:#111;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  direction:ltr;
  text-align:initial;
  cursor:pointer;
}
.hr-showcase-item:hover,
.hr-showcase-item:focus-visible{
  color:#111;
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(15,23,42,0.12);
  filter:brightness(.99);
}
.hr-showcase-item:focus-visible{
  outline:3px solid rgba(237,125,49,0.24);
  outline-offset:3px;
}
.hr-showcase-item-employee{
  grid-template-columns:minmax(160px, 280px) minmax(0, 1fr);
}
.hr-showcase-item-kpi,
.hr-showcase-item-timesheet{
  grid-template-columns:minmax(0, 1fr) minmax(120px, 220px);
}
.hr-showcase-name{
  min-width:0;
  text-align:center;
  font-size:clamp(20px, 1.8vw, 28px);
  font-weight:900;
  line-height:1.18;
  color:#000;
}
html[dir="rtl"] .hr-showcase-name{
  direction:rtl;
}
.hr-showcase-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:34px;
  padding:8px 16px;
  border-radius:999px;
  font-size:20px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.hr-showcase-pill.is-neutral{
  background:#fff;
  color:#111;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,0.06);
}
.hr-showcase-pill.is-warning{
  background:#ed7d31;
  color:#fff;
}
.hr-showcase-pill.is-success{
  background:#148841;
  color:#fff;
}
.detail-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:rgba(0,0,0,0.45);
  z-index:140;
}
.detail-modal[hidden]{
  display:none !important;
}
.detail-dialog{
  width:min(100%, 780px);
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#ffffff;
  border-radius:20px;
  border:1.5px solid var(--border);
  box-shadow:0 22px 55px rgba(0,0,0,0.22);
  padding:20px;
  margin:auto 0;
}
body.has-overlay-modal{
  overflow:hidden;
  overscroll-behavior:none;
}
.hr-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}
.hr-detail-item{
  border:1px solid var(--border);
  border-radius:16px;
  background:#f8fafc;
  padding:12px 14px;
  min-width:0;
}
.hr-detail-item-full{
  grid-column:1 / -1;
}
.hr-detail-label{
  font-size:12px;
  font-weight:800;
  color:#6b7280;
  margin-bottom:6px;
}
.hr-detail-value{
  font-size:15px;
  font-weight:700;
  color:#111827;
  line-height:1.45;
  word-break:break-word;
}
.hr-detail-section{
  margin-top:18px;
}
.hr-detail-section-title{
  font-size:15px;
  font-weight:900;
  margin-bottom:10px;
}
.hr-detail-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hr-detail-entry{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:12px 14px;
}
.hr-detail-entry-title{
  font-size:15px;
  font-weight:900;
}
.hr-detail-entry-body{
  margin-top:10px;
  color:#374151;
  line-height:1.55;
  white-space:pre-wrap;
}
@media (max-width: 820px){
  .hr-showcase-item-employee,
  .hr-showcase-item-kpi,
  .hr-showcase-item-timesheet{
    grid-template-columns:1fr;
  }
  .hr-showcase-name{
    font-size:clamp(18px, 4vw, 22px);
  }
  .hr-showcase-pill{
    font-size:18px;
  }
  .hr-detail-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 560px){
  .hr-showcase-item{
    border-radius:22px;
    padding:10px;
  }
  .detail-modal{
    padding:12px;
  }
  .detail-dialog{
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    padding:16px;
    border-radius:18px;
  }
}


.voice-note-panel{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fafafa;
}
.voice-note-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.voice-note-item{
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}
.voice-note-item__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.voice-note-widget{
  padding:12px;
  border:1px dashed var(--border);
  border-radius:14px;
  background:#fff;
}
@media (max-width: 640px){
  .voice-note-item__meta{
    align-items:flex-start;
    flex-direction:column;
  }
}

.project-delayed-row{
  background:linear-gradient(90deg, #fff1f2 0%, #fff7f7 55%, #ffffff 100%);
  box-shadow:inset 5px 0 0 #dc2626;
}
.project-delayed-row td{
  border-bottom-color:#fecaca;
}
.delayed-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  border-radius:999px;
  background:#fee2e2;
  color:#991b1b;
  border:1px solid #fecaca;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.reference-chip{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:5px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  border:1px solid #c7d2fe;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.service-request-hero{
  background:linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #fff5f6 100%);
}
.service-request-table .request-title{
  margin-bottom:4px;
}
.service-request-action-form textarea{
  min-height:72px;
}
@media (max-width: 640px){
  .reference-chip,
  .delayed-badge{
    width:max-content;
  }
}


/* Projects page enhancements: clearer Create button, delayed rows, and progress colors */
.projects-header-row{
  align-items:center;
}
.project-create-btn{
  min-height:48px;
  padding:11px 18px;
  border:3px solid rgba(37,99,235,0.55);
  background:rgba(191,219,254,0.96);
  color:#0f3f8f;
  font-size:16px;
  font-weight:950;
  box-shadow:0 8px 18px rgba(37,99,235,0.14), inset 0 0 0 1px rgba(255,255,255,0.58);
}
.project-create-btn:hover{
  background:rgba(147,197,253,0.98);
  color:#0b3478;
  transform:translateY(-1px);
}
.project-create-icon{
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  color:#0f3f8f;
  border:2px solid rgba(37,99,235,0.28);
  font-size:22px;
  line-height:1;
  font-weight:950;
}
.projects-search-grid{
  align-items:end;
}
.projects-filter-actions{
  margin-top:2px;
}
.project-progress-badge{
  min-width:58px;
  justify-content:center;
  padding:5px 10px;
  color:#ffffff !important;
  border-width:1.5px;
}
.project-progress-badge.progress-zero{
  background:#c00000;
  border-color:#c00000;
}
.project-progress-badge.progress-ongoing{
  background:#ed7d31;
  border-color:#ed7d31;
}
.project-progress-badge.progress-complete{
  background:#0c8241;
  border-color:#0c8241;
}
.project-delayed-row{
  background:linear-gradient(90deg, rgba(254,226,226,0.98) 0%, rgba(255,241,242,0.98) 65%, rgba(255,255,255,0.98) 100%);
  box-shadow:inset 7px 0 0 #c00000;
}
.project-delayed-row td{
  border-bottom-color:#fecaca;
}
.project-delayed-row:hover{
  background:linear-gradient(90deg, rgba(254,202,202,0.98) 0%, rgba(255,228,230,0.98) 65%, rgba(255,255,255,0.98) 100%);
}
@media (max-width: 640px){
  .project-create-btn,
  .projects-filter-actions .btn{
    width:100%;
  }
}


/* Batches module */
.batches-summary{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin:12px 0 0;
}
.batches-summary .mini-card{
  border-color:rgba(2,136,209,0.18);
  background:rgba(2,136,209,0.05);
}
.batch-number-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(2,136,209,0.08);
  border:1px solid rgba(2,136,209,0.24);
  font-weight:900;
}
.batches-page table th,
.batches-page table td{
  vertical-align:middle;
}
@media (max-width: 800px){
  .batches-summary{ grid-template-columns:1fr; }
}

/* Batches page layout fix: avoid Bootstrap col-* width conflicts and keep fields readable */
.batches-page .batches-entry-grid,
.batches-page .batches-search-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(170px, 1fr));
  gap:18px 22px;
  align-items:end;
  width:100%;
}
.batches-page .batch-field{
  min-width:0;
  width:100%;
}
.batches-page .batch-field-wide{
  grid-column:span 2;
}
.batches-page .field{
  width:100%;
}
.batches-page .field > span{
  display:block;
  white-space:nowrap;
  line-height:1.25;
  margin-bottom:2px;
}
.batches-page input[type="text"],
.batches-page input[type="number"],
.batches-page input[type="date"]{
  width:100%;
  max-width:100%;
  min-height:50px;
  border-radius:12px;
}
.batches-page .batches-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding-top:2px;
}
.batches-page .batches-actions .btn{
  min-width:140px;
  width:auto;
}
.batches-page .batch-actions-search{
  justify-content:flex-start;
}
@media (max-width: 1200px){
  .batches-page .batches-entry-grid,
  .batches-page .batches-search-grid{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
  }
  .batches-page .batch-field-wide{
    grid-column:span 1;
  }
}
@media (max-width: 640px){
  .batches-page .batches-entry-grid,
  .batches-page .batches-search-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .batches-page .batches-actions .btn{
    width:100%;
  }
}

/* Project and sub-task comment threads */
.project-comments-panel .comment-compose-form,
.comment-reply-form{
  padding:12px;
  border:1px dashed var(--border);
  border-radius:14px;
  background:#fff;
}
.comment-thread-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.thread-comment{
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,0.04);
  scroll-margin-top:90px;
}
.thread-comment:target,
.comment-reply:target{
  outline:3px solid rgba(2,136,209,0.22);
  outline-offset:2px;
}
.comment-body{
  margin-top:8px;
  line-height:1.65;
  word-break:break-word;
}
.comment-attachments{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background:rgba(2,136,209,0.04);
  border:1px solid rgba(2,136,209,0.12);
}
.comment-attachments ul{
  margin:4px 0 0;
  padding-left:18px;
}
[dir="rtl"] .comment-attachments ul{
  padding-left:0;
  padding-right:18px;
}
.comment-replies{
  margin-top:12px;
  padding-left:18px;
  border-left:3px solid rgba(2,136,209,0.16);
  display:flex;
  flex-direction:column;
  gap:10px;
}
[dir="rtl"] .comment-replies{
  padding-left:0;
  padding-right:18px;
  border-left:0;
  border-right:3px solid rgba(2,136,209,0.16);
}
.comment-reply{
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fbfdff;
  scroll-margin-top:90px;
}
.comment-reply-form{
  margin-top:12px;
}
.comment-reply-form textarea{
  min-height:82px;
}
.task-update-thread-list .thread-comment{
  margin:0;
}
@media (max-width:640px){
  .comment-replies{
    padding-left:10px;
  }
  [dir="rtl"] .comment-replies{
    padding-right:10px;
  }
}

/* Projects page layout polish: logical filters and sub-department-style task list */
.projects-toolbar-card{
  padding:20px 22px;
}
.projects-toolbar-card .projects-header-row{
  gap:14px;
  justify-content:space-between;
}
.projects-toolbar-card .projects-search-grid{
  display:grid;
  grid-template-columns:minmax(240px, 1.55fr) minmax(220px, 1.15fr) minmax(280px, 1.65fr) minmax(170px, .85fr) minmax(190px, .95fr);
  gap:16px 18px;
  align-items:end;
  width:100%;
  margin-top:18px;
}
.projects-toolbar-card .projects-search-field,
.projects-toolbar-card .projects-search-grid .field{
  min-width:0;
  width:100%;
}
.projects-toolbar-card .projects-search-grid .field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.projects-toolbar-card .projects-search-grid .field > span{
  display:block;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  white-space:nowrap;
}
.projects-toolbar-card .projects-search-grid input,
.projects-toolbar-card .projects-search-grid select{
  width:100%;
  min-width:0;
  min-height:48px;
  padding-inline:14px;
}
.projects-toolbar-card .projects-filter-actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  margin-top:0;
}
.projects-toolbar-card .projects-filter-actions .btn{
  width:auto;
  min-width:132px;
}
.projects-showcase-card{
  padding-top:18px;
}
.projects-showcase-heading{
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.projects-results-count{
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(0,0,0,0.08);
}
.projects-task-showcase-list .projects-showcase-item{
  cursor:pointer;
  position:relative;
}
.projects-task-showcase-list .projects-showcase-item.is-overdue{
  background:linear-gradient(90deg, #fee2e2 0%, #fff1f2 58%, #f8d7da 100%);
  box-shadow:0 8px 20px rgba(15,23,42,0.06), inset 8px 0 0 #c00000;
}
html[dir="rtl"] .projects-task-showcase-list .projects-showcase-item.is-overdue{
  box-shadow:0 8px 20px rgba(15,23,42,0.06), inset -8px 0 0 #c00000;
}
.projects-task-showcase-list .projects-showcase-item.is-overdue:hover,
.projects-task-showcase-list .projects-showcase-item.is-overdue:focus-visible{
  background:linear-gradient(90deg, #fecaca 0%, #ffe4e6 58%, #f8d7da 100%);
}
.projects-task-showcase-list .project-showcase-progress{
  color:#fff;
  box-shadow:none;
}
.projects-task-showcase-list .project-showcase-progress.progress-zero{
  background:#c00000;
}
.projects-task-showcase-list .project-showcase-progress.progress-ongoing{
  background:#ed7d31;
}
.projects-task-showcase-list .project-showcase-progress.progress-complete{
  background:#0c8241;
}
.projects-task-showcase-list .project-showcase-name{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.projects-row-title-link{
  color:inherit;
  text-decoration:none;
  font-weight:inherit;
}
.projects-row-title-link:hover,
.projects-row-title-link:focus-visible{
  text-decoration:underline;
}
.project-showcase-ref{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:4px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  border:1px solid #c7d2fe;
  font-size:12px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.02em;
}
.project-showcase-meta{
  display:block;
  max-width:100%;
  color:#4b5563;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[dir="rtl"] .project-showcase-name,
html[dir="rtl"] .project-showcase-meta{
  direction:rtl;
}
.project-showcase-actions{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}
.project-inline-action{
  width:auto !important;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  position:relative;
  z-index:2;
}
@media (max-width: 1280px){
  .projects-toolbar-card .projects-search-grid{
    grid-template-columns:repeat(3, minmax(220px, 1fr));
  }
  .projects-toolbar-card .projects-search-field-main,
  .projects-toolbar-card .projects-search-field-section{
    grid-column:span 1;
  }
}
@media (max-width: 900px){
  .projects-toolbar-card .projects-search-grid{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
  }
  .projects-toolbar-card .projects-search-field-main,
  .projects-toolbar-card .projects-search-field-section{
    grid-column:1 / -1;
  }
}
@media (max-width: 640px){
  .projects-toolbar-card{
    padding:16px;
  }
  .projects-toolbar-card .projects-search-grid{
    grid-template-columns:1fr;
    gap:13px;
  }
  .projects-toolbar-card .projects-filter-actions{
    justify-content:stretch;
  }
  .projects-toolbar-card .projects-filter-actions .btn{
    width:100%;
  }
  .projects-task-showcase-list .project-showcase-meta{
    white-space:normal;
  }
  .project-showcase-ref{
    font-size:11px;
  }
}

/* Employee assignment select-all control */
.employee-select-all-toolbar{
  width:100%;
  margin-bottom:10px;
}
.employee-select-all-checkbox{
  background:#ffffff;
  border:2px solid rgba(166,61,76,0.22);
  font-weight:800;
  justify-content:flex-start;
}
.employee-select-all-checkbox span{
  font-weight:800;
}

/* Organized sidebar dropdown groups */
.nav-dropdown{ display:flex; flex-direction:column; gap:6px; }
.nav-dropdown > summary{ list-style:none; cursor:pointer; user-select:none; }
.nav-dropdown > summary::-webkit-details-marker{ display:none; }
.nav-dropdown-summary{ justify-content:space-between; gap:10px; }
.nav-caret{ margin-inline-start:auto; font-weight:900; transition:transform .2s ease; opacity:.9; }
.nav-dropdown[open] .nav-caret{ transform:rotate(180deg); }
.nav-dropdown:not([open]) .nav-children{ display:none; }
.nav-dropdown[open] .nav-children{ display:flex; }