:root{
  --bg:#f8fafc; --panel:#ffffff; --muted:#f1f5f9; --text:#0f172a; --subtext:#475569;
  --primary:#0061ff; --primary-600:#0047cc; --accent:#16a34a; --danger:#ef4444;
  --border:#e2e8f0; --card:#ffffff;
  --shadow: 0 4px 12px rgba(2,6,23,.05); --radius: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color:var(--text); }

.app{display:none; grid-template-rows:auto 1fr; height:100%}
header{display:flex; align-items:center; gap:16px; padding:12px 24px; background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5}
.brand{font-weight:700; font-size: 1.1em; letter-spacing:-.2px} .brand span{color:var(--primary)}
.header-right{margin-left:auto; display:flex; align-items:center; gap:12px}

input, select, textarea { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; outline:none; width:100%; transition: border-color .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
input:disabled, select:disabled { background-color: var(--muted); cursor: not-allowed; opacity: 0.7; }
textarea{min-height:110px; resize:vertical}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; transition:all .15s ease; text-decoration:none; font-weight: 500;}
.btn:hover{background-color: var(--muted);}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--primary-600)}
.btn.danger{color:var(--danger); border-color:transparent; background:transparent;}
.btn.danger:hover{background: #fee2e2;}
.btn svg { width: 16px; height: 16px; }

.layout{padding: 24px; max-width: 1400px; margin: 0 auto; width: 100%;}

.toolbar{display:flex; flex-wrap: wrap; gap:16px; align-items:center; margin-bottom: 24px;}
.search{flex-grow: 1; min-width: 250px;}
.filter-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-group label { font-size: 0.9em; color: var(--subtext); font-weight: 500; }
.filter-pills .btn { padding: 8px 12px; font-weight: normal; color: var(--subtext); border-color: transparent; }
.filter-pills .btn.active { background-color: #eef2ff; color: var(--primary); font-weight: 500;}

.tasks-container{overflow-y:auto;}
.tasks-section h2{margin:0 0 12px 0; font-size:1.2em; color: var(--text); font-weight: 600;}
.action-required-panel { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 16px; border-radius: var(--radius); margin-bottom: 24px; }
.action-required-panel h2 { text-align: center; }

.tasks{display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-content:start;}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px; position:relative; cursor:pointer; transition: transform .1s ease, box-shadow .1s ease; border-left: 4px solid transparent;}
.card:hover{transform: translateY(-2px); box-shadow: 0 8px 15px rgba(2,6,23,.06);}
.card.priority-High { border-left-color: var(--danger); }
.card.priority-Medium { border-left-color: var(--primary); }
.card.priority-Low { border-left-color: var(--border); }
.card.has-qs { padding-right: 76px; } /* space for vertical quick actions */

.badge{font-size:12px; padding:4px 10px; border-radius:999px; background:var(--muted); border:1px solid var(--border); color:#1f2937}
.badge.green{background:#dcfce7; border-color:#bbf7d0; color:#15803d}
.badge.red{background:#fee2e2; border-color:#fecaca; color:#b91c1c; font-weight: 600;}

.card h3{margin:0; font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px;}
.card h3 svg{width:14px; height:14px; opacity:.7;}
.card small{color:var(--subtext); line-height: 1.5;}
.card-footer{display:flex; align-items:center; flex-wrap: wrap; gap:8px; margin-top:auto; padding-top:10px;}

.empty{opacity:.75; text-align:center; padding:24px; background:var(--muted); border-radius:10px;}

dialog{border:none; border-radius:14px; padding:0; width:min(720px, 92vw); color:var(--text); background:var(--panel); border:1px solid var(--border); box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); }
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px;}
.modal-body{padding:0 20px 20px 20px; display:flex; flex-direction:column; gap:16px;}
.modal-footer{padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); display:flex; justify-content: space-between; align-items:center;}
.stack{display:grid; gap:8px}

.status-bar{display:flex; gap:6px; background:var(--muted); padding:6px; border-radius:10px;}
.status-btn{flex:1; padding:8px 10px; border-radius:8px; border:none; background:transparent; font-size:14px; cursor:pointer; font-weight:500; color: var(--subtext); transition: all .2s;}
.status-btn.active{background:var(--primary); color:white; font-weight:600; box-shadow: 0 1px 3px rgba(0,0,0,.1);}

.comments{display:flex; flex-direction:column; gap:10px; max-height:40vh; overflow:auto; padding:10px; background:var(--muted); border-radius:10px;}
.comment{background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:10px}
.comment .meta{display:flex; align-items:center; gap:8px; color:#1f2937; font-size:12px; margin-bottom:6px}

#userManagementModal .user-list, #overdueReportModal .report-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
#userManagementModal .user-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--muted); border-radius: 8px; transition: background .2s; }
#userManagementModal .user-list li:hover { background-color: #e9eef5; }
#userManagementModal form { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; display: grid; gap: 12px; }
#overdueReportModal .report-item { padding: 10px; background: var(--muted); border-radius: 8px; }
#overdueReportModal .report-item strong { display: block; }
#overdueReportModal .report-item small { color: var(--subtext); }

.login-gate{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:100}
.login-card{width:min(420px, 92vw); background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:24px 28px;}
.lang-select { display:flex; align-items:center; gap:8px; }
.lang-select select { padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--panel); }

/* vertical quick status rail on cards */
.qs-rail{
  position:absolute; top:12px; right:12px;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:auto;
}
.qs-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border);
  background:var(--panel); box-shadow: var(--shadow);
  cursor:pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.qs-btn:hover{ transform: translateY(-1px); background: var(--muted); }
.qs-btn svg{ width:16px; height:16px; opacity:.9; }

.qs-btn.inprogress.active{ background:#eef2ff; border-color:#dbeafe; }
.qs-btn.done.active{ background:#dcfce7; border-color:#bbf7d0; }

/* micro-toasts */
.toast-host{
  position:fixed; right:16px; bottom:16px;
  display:flex; flex-direction:column; gap:8px;
  z-index:2000; pointer-events:none;
}
.toast{
  padding:10px 12px; border-radius:10px; background:#111827; color:#fff;
  font-size:13px; box-shadow:0 8px 20px rgba(0,0,0,.2);
  animation: toast-in .18s ease forwards; opacity:.98; pointer-events:auto;
}
.toast.error{ background:#991b1b; }
@keyframes toast-in{ from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:.98} }
@keyframes toast-out{ to{transform:translateY(8px); opacity:0} }

/* app loader overlay */
.app-loader{
  position:fixed; inset:0; background:rgba(248,250,252,.9); backdrop-filter:saturate(120%) blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:1500;
}
.app-loader.hidden{ display:none; }
.loader-card{ background:var(--panel); border:1px solid var(--border); padding:24px; border-radius:14px; box-shadow: var(--shadow); width:min(420px, 92vw); }
.loader-lines{ margin-top:16px; display:grid; gap:8px; }
.skel-line{ height:12px; background:linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:8px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* dashboard skeleton cards */
.skel-card{
  position:relative; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--panel);
  min-height:100px; overflow:hidden;
}
.skel-card .skel-line{ margin:6px 0; }
.skel-badge{ width:80px; height:20px; border-radius:999px; background:#e5e7eb; }
.skel-shimmer{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,.04), rgba(255,255,255,0)); animation: shimmer 1.4s infinite; opacity:.35; }

/* modal busy */
.modal-root{ position:relative; }
.modal-busy{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.6); border-radius:14px; }
.modal-busy.hidden{ display:none; }
.spinner{
  width:26px; height:26px; border:3px solid #cbd5e1; border-top-color: var(--primary); border-radius:50%; animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }