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

:root{
  --ink: #1B2430;
  --ink-soft: #4B5768;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --border: #E2E5EA;
  --accent: #2F6F5E;
  --accent-dark: #234F42;
  --accent-soft: #E6EFEC;
  --amber: #9A6B21;
  --amber-soft: #FBF1DF;
  --brick: #A5402B;
  --brick-soft: #FBEAE6;
  --radius: 10px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
}

a{ color:var(--accent); }

/* ---------- Login screen ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px 32px;
}
.login-logo{
  height:48px;
  width:auto;
  display:block;
  margin-bottom:18px;
}
.login-card h1{
  font-size:20px;
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
.login-card p.sub{
  color:var(--ink-soft);
  margin:0 0 24px;
  font-size:13.5px;
}
label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  margin:16px 0 6px;
}
input[type=text], input[type=password], input[type=date], select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;
  font-size:14.5px;
  background:#fff;
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
button{
  font-family:inherit;
  cursor:pointer;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:44px;
  padding:0 16px;
  white-space:nowrap;
  border-radius:8px;
  border:1px solid transparent;
  font-weight:600;
  font-size:14px;
}
.btn-primary{
  background:var(--accent);
  color:#fff;
}
.btn-primary:hover{ background:var(--accent-dark); }
.login-card .btn-primary{
  width:100%;
  margin-top:22px;
}
.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--ink);
}
.btn-ghost:hover{ background:#F0F1F3; }
.btn-danger{
  background:var(--brick);
  color:#fff;
  border-color:var(--brick);
}
.btn-danger:hover{ background:#8a3423; }
.btn-blue{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
.btn-blue:hover{ background:#1d4ed8; }
.error-msg{
  background:var(--brick-soft);
  color:var(--brick);
  padding:10px 12px;
  border-radius:8px;
  font-size:13.5px;
  margin-top:16px;
  display:none;
}
.error-msg.show{ display:block; }
.forgot-link{
  text-align:center;
  margin-top:16px;
  font-size:13.5px;
}
.help-text{
  color:var(--ink-soft);
  font-size:13.5px;
  margin:4px 0 0;
}
.success-msg{
  background:var(--accent-soft);
  color:var(--accent-dark);
  padding:10px 12px;
  border-radius:8px;
  font-size:13.5px;
  margin-top:16px;
  display:none;
}
.success-msg.show{ display:block; }

.modal-overlay{
  position:fixed; inset:0;
  background:rgba(27,36,48,0.45);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
.modal-box{
  background:var(--surface);
  border-radius:var(--radius);
  padding:24px 26px;
  max-width:520px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
}
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.detail-row:last-child{ border-bottom:none; }
.detail-row .label{ color:var(--ink-soft); }
.detail-row .value{ font-weight:600; text-align:right; }

/* ---------- App shell ---------- */
.app{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--ink);
  color:#EDEFF2;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  font-size:15px;
  margin-bottom:6px;
}
.sidebar .brand-logo{
  height:28px;
  width:auto;
  vertical-align:middle;
}
.sidebar .whoami{
  font-size:12.5px;
  color:#A6ADB8;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid #313A48;
}
.sidebar nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.sidebar nav a, .sidebar nav button{
  text-decoration:none;
  color:#C7CCD4;
  background:none;
  border:none;
  text-align:left;
  padding:9px 10px;
  border-radius:7px;
  font-size:14px;
  font-weight:500;
}
.sidebar nav a.active, .sidebar nav a:hover, .sidebar nav button:hover{
  background:#2A3340;
  color:#fff;
}
.sidebar .logout{ margin-top:0; background:var(--brick); color:#fff; font-weight:600; border:none; }
.sidebar .logout:hover{ background:#8a3423; }
.sidebar .settings-link{
  margin-top:auto;
  text-decoration:none;
  color:#C7CCD4;
  padding:9px 10px;
  border-radius:7px;
  font-size:14px;
  font-weight:500;
  display:block;
  text-align:center;
}
.sidebar .settings-link:hover{ background:#2A3340; color:#fff; }

main{
  padding:32px 40px;
  max-width:1680px;
}
h1.page-title{
  font-size:22px;
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
p.page-sub{
  color:var(--ink-soft);
  margin:0 0 28px;
  font-size:14px;
}

/* ---------- Cards / stats ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:14px;
  margin-bottom:28px;
}
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 18px;
}
.stat-card .num{ font-size:26px; font-weight:700; letter-spacing:-0.01em; }
.stat-card .label{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:24px;
  overflow-x:auto;
}
.panel h2{
  font-size:15.5px;
  margin:0 0 16px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

.tab-row{
  display:flex;
  gap:4px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.tab-btn{
  background:none;
  border:none;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{
  color:var(--accent-dark);
  border-bottom-color:var(--accent);
}

/* ---------- Table ---------- */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{
  text-align:left;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
td{
  padding:11px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
tr:last-child td{ border-bottom:none; }

.badge{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.badge-pending{ background:var(--amber-soft); color:var(--amber); }
.badge-approved{ background:var(--accent-soft); color:var(--accent-dark); }
.badge-rejected{ background:var(--brick-soft); color:var(--brick); }
.badge-cancelled{ background:#EEF0F2; color:var(--ink-soft); }

.row-actions{ display:flex; gap:8px; align-items:center; }
.row-actions .btn{ width:120px; }
.btn-sm{ padding:0 12px; height:44px; font-size:13px; border-radius:6px; }

.empty-state{
  color:var(--ink-soft);
  font-size:13.5px;
  padding:18px 0;
  text-align:center;
}

.toast{
  position:fixed; bottom:20px; right:20px;
  background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:8px;
  font-size:13.5px;
  opacity:0; transform:translateY(8px);
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }

@media (max-width: 800px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ flex-direction:row; align-items:center; padding:14px 18px; }
  .sidebar .whoami{ display:none; }
  .sidebar nav{ flex-direction:row; }
  main{ padding:20px; }
  .field-row{ grid-template-columns:1fr; }
}

.company-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:16px;
  max-width:800px;
}
.company-card{
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:28px 22px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:background .15s, transform .15s;
}
.company-card:hover{
  background:var(--accent-dark);
  transform:translateY(-2px);
}
.company-card .company-name{
  font-size:19px;
  font-weight:700;
  color:#fff;
}
.company-card .company-count{
  font-size:13px;
  color:rgba(255,255,255,0.85);
}

/* ---------- Language toggle ---------- */
.lang-toggle{
  background:none;
  border:1px solid #3A4453;
  color:#C7CCD4;
  padding:6px 10px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  margin-bottom:16px;
  align-self:flex-start;
}
.lang-toggle:hover{ background:#2A3340; color:#fff; }
.login-card .lang-toggle{
  border-color:var(--border);
  color:var(--ink-soft);
  align-self:flex-start;
  margin-bottom:14px;
}
.login-card .lang-toggle:hover{ background:#F0F1F3; }

/* ---------- RTL layout (Arabic) ---------- */
html[dir="rtl"] body{ font-family:'Tahoma','Segoe UI', 'Inter', system-ui, sans-serif; }
html[dir="rtl"] .sidebar nav a,
html[dir="rtl"] .sidebar nav button{ text-align:right; }
html[dir="rtl"] th{ text-align:right; }
html[dir="rtl"] .detail-row{ flex-direction:row-reverse; }
html[dir="rtl"] .row-actions{ flex-direction:row-reverse; justify-content:flex-end; }
html[dir="rtl"] .forgot-link{ text-align:center; }
html[dir="rtl"] .toast{ right:auto; left:20px; }
html[dir="rtl"] .sidebar .settings-link{ text-align:center; }
html[dir="rtl"] .company-grid,
html[dir="rtl"] .stat-row{ direction:rtl; }
@media (max-width: 800px){
  html[dir="rtl"] .sidebar{ flex-direction:row-reverse; }
}