@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#6d5ef7;
  --primary-dark:#4f3ee0;
  --primary-light:#8f7cfa;
  --accent-pink:#f45b9c;
  --bg:#f2f1fb;
  --card:#ffffff;
  --text:#1a1b2e;
  --muted:#7a7d9c;
  --border:#eceafc;
  --danger:#e5484d;
  --danger-bg:#fdeceb;
  --success:#1cb87a;
  --success-bg:#e4f9ef;
  --warning:#f5a524;
  --warning-bg:#fef3e0;
  --idle:#c7c9e8;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(30,20,80,.05);
  --shadow-md:0 8px 24px rgba(45,32,120,.09);
  --shadow-lg:0 20px 50px rgba(45,32,120,.16);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',Tahoma,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
h1,h2,h3{font-family:'Inter',Tahoma,sans-serif;letter-spacing:0;}

/* ---------- Login page ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(circle at 20% 20%, #7a6bfb 0%, #4433c9 45%, #241a6b 100%);}
#particles-js{position:absolute;inset:0;}
.login-box{position:relative;z-index:2;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);padding:44px 38px;border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:370px;}
.login-logo{display:block;width:82px;height:82px;object-fit:contain;margin:0 auto 14px;border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);}
.login-language{position:absolute;top:14px;right:14px;}
.login-language.language-switch{background:#f2f1fb;margin-bottom:0;}
.login-language.language-switch a{color:var(--muted);}
.login-language.language-switch a.active{background:#fff;color:var(--primary-dark);box-shadow:var(--shadow-sm);}
.login-box h1{margin:0 0 4px;font-size:26px;font-weight:800;background:linear-gradient(120deg,var(--primary-dark),var(--accent-pink));-webkit-background-clip:text;background-clip:text;color:transparent;}
.login-box p.sub{margin:0 0 26px;color:var(--muted);font-size:14px;}
.input-group{margin-bottom:16px;}
.input-group input{width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:11px;font-size:15px;background:#fbfaff;transition:.15s;}
.input-group input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(109,94,247,.13);}
.btn-primary{width:100%;padding:13px;border:none;border-radius:11px;background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:.15s;box-shadow:0 8px 20px rgba(109,94,247,.35);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(109,94,247,.45);}
.login-msg{margin-top:14px;color:var(--danger);font-size:13.5px;text-align:center;font-weight:600;}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:242px;background:linear-gradient(190deg,#211a52,#171236);color:#e5e5f7;display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;transition:transform .2s;z-index:50;}
.sidebar-brand{padding:26px 22px 20px;font-size:20px;font-weight:800;display:flex;align-items:center;gap:9px;letter-spacing:-.01em;}
.brand-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(120deg,var(--primary-light),var(--accent-pink));display:inline-block;box-shadow:0 0 12px rgba(109,94,247,.8);}
.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:3px;padding:8px 12px;}
.sidebar-nav a{padding:11px 15px;border-radius:11px;color:#b8b8de;font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:10px;transition:.15s;}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-nav a.active{background:linear-gradient(120deg,var(--primary),#8a4ff0);color:#fff;box-shadow:0 4px 14px rgba(109,94,247,.4);}
.nav-icon{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
.sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,.08);}
.language-switch{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:4px;margin-bottom:12px;}
.language-switch a{flex:1;text-align:center;padding:6px 8px;border-radius:8px;color:#b8b8de;font-size:12px;font-weight:800;}
.language-switch a.active{background:#fff;color:var(--primary-dark);}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sidebar-user img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#333;border:2px solid rgba(255,255,255,.15);}
.su-name{font-size:13.5px;font-weight:700;color:#fff;}
.su-role{font-size:11px;color:#9d9dce;text-transform:uppercase;letter-spacing:.04em;}
.btn-logout{display:block;text-align:center;padding:9px;border-radius:10px;background:rgba(255,255,255,.07);color:#e5e5f7;font-size:13px;font-weight:600;transition:.15s;}
.btn-logout:hover{background:rgba(229,72,77,.25);color:#ffd7d8;}

.main-col{margin-left:242px;flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 28px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;}
.topbar h1{font-size:20px;font-weight:800;margin:0;}
.hamburger{display:none;background:none;border:none;font-size:20px;cursor:pointer;}
.page-content{padding:26px 32px 60px;width:100%;}

[dir="rtl"] body{text-align:right;}
[dir="rtl"] .sidebar{left:auto;right:0;}
[dir="rtl"] .main-col{margin-left:0;margin-right:242px;}
[dir="rtl"] .login-language{right:auto;left:14px;}
[dir="rtl"] table.data-table th,[dir="rtl"] table.data-table td{text-align:right;}
[dir="rtl"] .stat-card::before{left:auto;right:0;}
[dir="rtl"] .team-card{border-left:1.5px solid var(--border);border-right:5px solid var(--idle);}
[dir="rtl"] .team-card.status-busy{border-right-color:var(--primary);}
[dir="rtl"] .team-card.status-overdue{border-right-color:var(--danger);}
[dir="rtl"] .task-actions{margin-left:0;margin-right:auto;}
[dir="rtl"] .close-modal{right:auto;left:18px;}
[dir="rtl"] .badge-count{margin-left:0;margin-right:6px;}

/* ---------- Generic components ---------- */
.card{background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);border:1px solid var(--border);}
.grid{display:grid;gap:16px;}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:26px;}
.stat-card{background:var(--card);border-radius:var(--radius);padding:18px 20px;border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--primary);}
.stat-card.danger::before{background:var(--danger);}
.stat-card.success::before{background:var(--success);}
.stat-card .num{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.02em;}
.stat-card .label{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500;}
.stat-card.danger .num{color:var(--danger);}
.stat-card.success .num{color:var(--success);}

.btn{display:inline-block;padding:10px 18px;border-radius:11px;border:none;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit;}
.btn-primary{background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 6px 16px rgba(109,94,247,.32);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(109,94,247,.42);}
.btn-outline{background:#fff;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px;}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{background:#189e69;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger-outline{background:#fff;border:1.5px solid var(--danger);color:var(--danger);}
.btn-danger-outline:hover{background:var(--danger-bg);}

.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;}
.filter-row select{padding:10px 14px;border-radius:10px;border:1.5px solid var(--border);background:#fff;font-size:13.5px;font-weight:500;color:var(--text);}
.report-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;align-items:end;margin-bottom:22px;}
.report-filter-actions{display:flex;gap:10px;align-items:center;}
.report-table{margin-bottom:26px;}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.01em;}
.badge-pending{background:var(--warning-bg);color:var(--warning);}
.badge-completed{background:var(--success-bg);color:var(--success);}
.badge-overdue{background:var(--danger-bg);color:var(--danger);}
.badge-inactive{background:#e9e9f5;color:var(--muted);}
.badge-count{background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;margin-left:6px;}

/* ---------- Employee cards (Employees page) ---------- */
.emp-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.emp-card{text-align:center;padding:22px 16px;position:relative;transition:.15s;}
.emp-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.emp-card.inactive{opacity:.55;}
.emp-card img{width:68px;height:68px;border-radius:50%;object-fit:cover;background:#eee;margin-bottom:10px;border:3px solid #f2f1fb;}
.emp-card .name{font-weight:700;font-size:15px;}
.emp-card .phone{font-size:12.5px;color:var(--muted);margin:2px 0 10px;}
.emp-card .actions{display:flex;gap:6px;justify-content:center;margin-top:12px;}

/* ---------- Section headings ---------- */
.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin:8px 0 14px;}
.section-heading h2{font-size:16px;font-weight:800;margin:0;}
.section-heading .sub{font-size:12.5px;color:var(--muted);font-weight:500;}

/* ---------- Team overview cards (Tasks page) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:34px;}
.team-card{background:var(--card);border-radius:var(--radius);padding:0;border:1.5px solid var(--border);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:.18s;border-left:5px solid var(--idle);}
.team-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.team-card.status-busy{border-left-color:var(--primary);}
.team-card.status-overdue{border-left-color:var(--danger);animation:overdueGlow 2.2s ease-in-out infinite;}
@keyframes overdueGlow{
  0%,100%{box-shadow:var(--shadow-sm);}
  50%{box-shadow:0 0 0 4px rgba(229,72,77,.12), var(--shadow-md);}
}
.tc-top{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;}
.tc-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#eee;flex-shrink:0;border:2px solid #f2f1fb;}
.tc-info{flex:1;min-width:0;}
.tc-name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-phone{font-size:11.5px;color:var(--muted);}
.tc-count-badge{background:var(--idle);color:#6a6c8c;font-weight:800;font-size:12px;min-width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.team-card.status-busy .tc-count-badge{background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff;}
.team-card.status-overdue .tc-count-badge{background:var(--danger);color:#fff;}

.tc-tasks{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px;}
.tc-empty{padding:10px 8px;text-align:center;font-size:12px;color:var(--muted);background:#f7f7fc;border-radius:9px;}
.tc-task{background:#f7f7fd;border-radius:10px;padding:9px 11px;}
.tc-task.overdue{background:var(--danger-bg);}
.tc-task-row1{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);margin-bottom:6px;}
.tc-task-row1 b{color:var(--text);font-weight:700;}
.tc-progress{height:5px;border-radius:6px;background:#e6e5f7;overflow:hidden;margin-bottom:5px;}
.tc-progress-bar{height:100%;background:linear-gradient(90deg,var(--primary-light),var(--primary));border-radius:6px;transition:width .4s;}
.tc-task.overdue .tc-progress-bar{background:linear-gradient(90deg,#f28b82,var(--danger));}
.tc-time-remaining{font-size:11.5px;font-weight:700;color:var(--primary-dark);}
.tc-task.overdue .tc-time-remaining{color:var(--danger);}
.tc-task-actions{margin-top:8px;}
.tc-task-actions .btn{width:100%;text-align:center;}
.tc-actions{padding:12px 14px;border-top:1px solid var(--border);}
.tc-actions .btn{width:100%;text-align:center;}

/* ---------- Task list (flat rows, activity feed) ---------- */
.task-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:#fff;margin-bottom:10px;flex-wrap:wrap;transition:.15s;}
.task-row:hover{box-shadow:var(--shadow-sm);}
.task-row.overdue{border-color:#f6c6c8;background:#fffaf9;}
.task-emp{display:flex;align-items:center;gap:10px;min-width:160px;flex:1;}
.task-emp img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#eee;}
.task-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);flex:2;}
.task-meta b{color:var(--text);}
.task-time.overdue-text{color:var(--danger);font-weight:700;}
.task-actions{margin-left:auto;}

table.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
table.data-table th, table.data-table td{padding:12px 15px;border-bottom:1px solid var(--border);text-align:left;font-size:13.5px;}
table.data-table th{background:#f8f7fd;color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table tr.overdue td{color:var(--danger);}

/* ---------- Forms / modals ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .full{grid-column:1/-1;}
label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
input[type=text], input[type=number], input[type=tel], input[type=password], input[type=date], select{
  width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:#fbfaff;transition:.15s;
}
input:focus, select:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(109,94,247,.12);}
.preset-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.preset-btn{padding:8px 16px;border-radius:20px;border:1.5px solid var(--border);background:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:.15s;}
.preset-btn.active{border-color:transparent;color:#fff;background:linear-gradient(120deg,var(--primary),var(--primary-dark));}
.preset-btn:hover{border-color:var(--primary);}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(23,18,54,.55);backdrop-filter:blur(2px);z-index:100;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:20px;padding:28px;max-width:480px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);}
.modal-box h2{margin-top:0;font-size:19px;font-weight:800;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.close-modal{position:absolute;top:16px;right:18px;cursor:pointer;font-size:20px;color:var(--muted);background:#f2f1fb;border:none;width:30px;height:30px;border-radius:50%;line-height:1;}
.close-modal:hover{background:#e6e5f7;color:var(--text);}

.empty-state{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px;}

@media (max-width: 860px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-col{margin-left:0;}
  [dir="rtl"] .sidebar{transform:translateX(100%);}
  [dir="rtl"] .sidebar.open{transform:translateX(0);}
  [dir="rtl"] .main-col{margin-right:0;}
  .hamburger{display:block;}
  .form-grid{grid-template-columns:1fr;}
  .report-filters{grid-template-columns:1fr;}
  .report-filter-actions{justify-content:stretch;}
  .report-filter-actions .btn{flex:1;text-align:center;}
}