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

html,
body,
button,
input,
select,
textarea {
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

input[type="number"],
input[type="date"],
input[type="tel"],
time,
.stat b,
.metric b,
.finance-hero h2,
.finance-hero b,
.score strong {
  direction: ltr;
  unicode-bidi: isolate;
}

body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button,
a,
input,
select {
  touch-action: manipulation;
}

.top-actions { position: relative; }
.bell { position: relative; font-size: 17px; }
.bell b {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  font-size: 8px;
}

.notification-panel {
  position: absolute;
  top: 51px;
  left: 52px;
  width: min(390px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 100px));
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(11,31,58,.2);
  z-index: 80;
  padding: 12px;
}
.notification-panel header { display:flex; align-items:center; justify-content:space-between; padding: 4px 4px 11px; border-bottom:1px solid var(--line); }
.notification-panel header div { display:flex; flex-direction:column; }
.notification-panel header b { font-size: 13px; }
.notification-panel header small { font-size: 9px; color: var(--muted); margin-top: 2px; }
.notification-panel header button { width:30px; height:30px; border:0; border-radius:8px; background:#eef2f7; }

.alerts-panel { margin-bottom: 13px; }
.alert-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.alert-item { width:100%; min-height: 64px; border:1px solid var(--line); background:#fbfcfe; border-radius:12px; padding:10px; display:grid; grid-template-columns:34px 1fr auto; gap:9px; align-items:center; text-align:right; color:var(--ink); }
.alert-item i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-style:normal; font-weight:800; background:var(--soft); color:var(--blue); }
.alert-item span { display:flex; flex-direction:column; min-width:0; }
.alert-item b { font-size:10px; }
.alert-item small { margin-top:3px; font-size:8px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alert-item em { color:#8b96a7; font-style:normal; }
.alert-item.danger { border-color:#fecaca; background:#fffafa; }
.alert-item.danger i { background:#fee2e2; color:#dc2626; }
.alert-item.warning i { background:#fff4d6; color:#b7791f; }
.alert-item.info i { background:#e0f2fe; color:#0284c7; }
.alert-item.compact { margin-top:8px; min-height:58px; }
.all-clear { color:var(--muted); font-size:10px; text-align:center; padding:18px; margin:0; }

.danger-stat { border-color:#fecaca; }
.danger-stat i { background:#fee2e2; color:#dc2626; }
.late-text { color:#dc2626!important; }
.is-late b, .late-card small { color:#dc2626; }
.late-card { border-color:#fecaca; }

.client-card { text-align:right; }
.client-top { display:flex; align-items:center; justify-content:space-between; }
.client-card .avatar { margin:0; text-align:center; }
.client-overdue { border-color:#fecaca; }
.payment-state, .status-pill { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:5px 9px; border-radius:20px; font-size:8px; font-weight:700; }
.payment-state.ok, .status-pill.ok { background:#dcfce7; color:#15803d; }
.payment-state.warning, .status-pill.warning { background:#fff4d6; color:#a16207; }
.payment-state.danger, .status-pill.danger { background:#fee2e2; color:#dc2626; }
.client-contact { display:flex; flex-direction:column; gap:3px; padding:10px 0; color:var(--muted); font-size:8px; border-bottom:1px solid var(--line); }
.status-control { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:8px; margin-top:10px; }
.status-control select, .contract select { border:1px solid var(--line); background:#f8fafc; border-radius:8px; padding:6px; color:var(--ink); font-size:8px; }
.client-stats { grid-template-columns:repeat(3,1fr); text-align:center; }
.client-stats span+span { border-right:1px solid var(--line); }

.project-table .table-head, .project-table .table-row,
.finance-table .table-head, .finance-table .table-row { grid-template-columns: 1.65fr .85fr .7fr .85fr 1fr .9fr; }
.progress-edit { display:flex; align-items:center; gap:7px; }
.progress-edit input { width:70px; accent-color:var(--blue); }
.progress-edit span { min-width:30px; font-size:8px; }
.table-action { border:1px solid #bfd3ff; background:var(--soft); color:var(--blue); border-radius:8px; padding:7px 8px; font-size:8px; font-weight:700; }
.done-label { color:#15803d; font-size:8px; font-weight:700; }
.overdue-row { background:#fffafa; }
.paid-cell { display:flex; flex-direction:column; gap:5px; }
.paid-cell b { font-size:8px; }
.paid-cell i { height:5px; background:#e5eaf2; border-radius:5px; overflow:hidden; }
.paid-cell em { display:block; height:100%; background:linear-gradient(90deg,#2563eb,#38bdf8); }
.finance-hero small { display:block; margin-top:4px; color:#89a7c9; font-size:8px; }
.payment-summary { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding:14px; border-radius:12px; background:var(--soft); color:var(--blue); }
.payment-summary span { font-size:10px; }
.payment-summary b { font-size:16px; }

.contract { grid-template-columns:42px 1.4fr .8fr 1fr .65fr auto; }
.contract-alert { border-color:#fed7aa; background:#fffdf8; }
.report-metrics { grid-template-columns:repeat(4,1fr); }
.client-income { grid-column:1/-1; }
.muted-day { background:#fafbfd; }
.days .has-event:not(.today) { position:relative; color:var(--blue); font-weight:800; }
.days .has-event:not(.today):after { content:""; position:absolute; bottom:7px; width:5px; height:5px; border-radius:50%; background:var(--blue); }

@media (max-width: 720px) {
  .topbar h1 { font-size: 17px; }
  .topbar p { font-size: 10px; }
  .sidebar button { font-size: 13px; min-height: 46px; }
  .welcome small { font-size: 10px; }
  .welcome p { font-size: 10px; line-height: 1.8; }
  .stat span { font-size: 10px; }
  .stat b { font-size: 17px; }
  .stat small { font-size: 8px; }
  .panel-title h3 { font-size: 14px; }
  .project-meta b,
  .task-row b { font-size: 11px; }
  .project-meta span,
  .project-meta time,
  .task-row span { font-size: 9px; }
  .mobile-nav { padding-bottom: max(6px, env(safe-area-inset-bottom)); height: calc(68px + env(safe-area-inset-bottom)); }
  .content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .auth-page { padding: 14px; }
  .login-card,
  .setup-card { border-radius: 20px; }
  .notification-panel { position:fixed; top:70px; left:14px; right:14px; width:auto; max-height:calc(100vh - 155px); }
  .alert-grid { grid-template-columns:1fr; }
  .report-metrics { grid-template-columns:1fr 1fr; }
  .project-table .table-head, .project-table .table-row,
  .finance-table .table-head, .finance-table .table-row { min-width:820px; grid-template-columns:1.6fr .8fr .7fr .85fr 1fr .9fr; }
  .client-card { padding:16px; }
  .client-contact { font-size:9px; }
  .status-control, .status-control select { font-size:9px; }
  .finance-hero { gap:10px; }
  .finance-hero>div { padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.1); }
  .contract { grid-template-columns:40px 1fr auto; }
  .contract>div:nth-child(3), .contract>div:nth-child(4), .contract>div:nth-child(5) { display:none; }
}