/* assets/css/style.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sidebar-w:230px;
  --purple:#534AB7;--purple-l:#EEEDFE;--purple-d:#3C3489;
  --green-l:#EAF3DE;--green-d:#3B6D11;
  --amber-l:#FAEEDA;--amber-d:#854F0B;
  --red-l:#FCEBEB;--red-d:#A32D2D;
  --teal-l:#E1F5EE;--teal-d:#0F6E56;
  --gray-bg:#F5F4F1;--gray-border:#E0DEDB;
  --text:#1a1a1a;--text-m:#666;--text-l:#999;
  --white:#fff;--radius:10px;--radius-s:6px;
}
body{font-family:'Segoe UI',Arial,sans-serif;font-size:15px;color:var(--text);background:var(--gray-bg);direction:rtl;overflow-x:hidden}

/* SIDEBAR */
.sidebar{position:fixed;right:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--white);border-left:0.5px solid var(--gray-border);display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:1.3rem 1.2rem 1rem;font-size:16px;font-weight:700;color:var(--text);border-bottom:0.5px solid var(--gray-border);flex-shrink:0}
.sidebar-logo img{max-width:220px;height:auto;border-radius:0}
.nav-section{padding:0.6rem 0.8rem 0.2rem;font-size:11px;font-weight:600;color:var(--text-l);text-transform:uppercase;letter-spacing:.05em}
.nav-links{list-style:none;padding:0.4rem 0;flex:1}
.nav-links li{margin:1px 8px}
.nav-links a{display:grid;grid-template-columns:22px 1fr 24px;align-items:center;column-gap:8px;padding:9px 12px;border-radius:var(--radius-s);text-decoration:none;color:var(--text-m);font-size:14px;transition:all .15s}
.nav-links a:hover{background:var(--gray-bg);color:var(--text)}
.nav-links a.active{background:var(--purple-l);color:var(--purple);font-weight:600}
.nav-icon{font-size:16px;width:22px;min-width:22px;text-align:center;flex-shrink:0}
.sidebar-user{padding:1rem 1.2rem;border-top:0.5px solid var(--gray-border);flex-shrink:0}
.user-info{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--purple-l);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.user-name{font-size:13px;font-weight:600}
.logout-link{font-size:12px;color:var(--text-l);text-decoration:none}
.logout-link:hover{color:var(--red-d)}

/* MAIN */
.main-content{margin-right:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--white);border-bottom:0.5px solid var(--gray-border);padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:50}
.page-title{font-size:18px;font-weight:700}
.content-area{padding:1.5rem;flex:1}

/* ALERTS */
.alert{padding:10px 16px;border-radius:var(--radius-s);margin-bottom:1rem;font-size:14px}
.alert-success{background:var(--green-l);color:var(--green-d)}
.alert-error{background:var(--red-l);color:var(--red-d)}
.alert-info{background:var(--purple-l);color:var(--purple-d)}
.alert-warning{background:var(--amber-l);color:var(--amber-d)}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:1.4rem}
.stat-card{background:var(--white);border:0.5px solid var(--gray-border);border-radius:var(--radius);padding:1.1rem 1.2rem}
.stat-label{font-size:12px;color:var(--text-m);margin-bottom:5px}
.stat-value{font-size:26px;font-weight:700;color:var(--text)}
.stat-sub{font-size:12px;color:var(--text-l);margin-top:2px}

/* CARDS */
.card{background:var(--white);border:0.5px solid var(--gray-border);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.card-title{font-size:15px;font-weight:700}

/* TOOLBAR */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.toolbar .spacer{flex:1}

/* INPUTS */
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=number],select,textarea{
  padding:8px 12px;border:1px solid var(--gray-border);border-radius:var(--radius-s);
  font-size:14px;font-family:inherit;color:var(--text);background:var(--white);transition:border .2s;direction:rtl}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple)}
textarea{resize:vertical;min-height:72px}

/* BUTTONS */
.btn{padding:8px 16px;border-radius:var(--radius-s);border:0.5px solid var(--gray-border);background:var(--white);font-size:13px;font-family:inherit;cursor:pointer;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap;line-height:1.4}
.btn:hover{background:var(--gray-bg)}
.btn-primary{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-primary:hover{background:var(--purple-d);border-color:var(--purple-d)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-danger{color:var(--red-d);border-color:#F09595}
.btn-danger:hover{background:var(--red-l)}
.btn-success{color:var(--green-d);border-color:#97C459}
.btn-success:hover{background:var(--green-l)}
.btn-warning{color:var(--amber-d);border-color:#EF9F27}
.btn-warning:hover{background:var(--amber-l)}

/* TABLE */
.table-wrap{overflow-x:auto}
.table-wrap table{min-width:500px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{padding:10px 14px;color:var(--text-m);font-weight:600;font-size:12px;border-bottom:0.5px solid var(--gray-border);text-align:right;background:#FAFAF8;white-space:nowrap}
td{padding:11px 14px;border-bottom:0.5px solid var(--gray-border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FAFAF8}
.td-actions{display:flex;gap:6px;flex-wrap:wrap}

/* BADGES */
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:600}
.badge-green{background:var(--green-l);color:var(--green-d)}
.badge-amber{background:var(--amber-l);color:var(--amber-d)}
.badge-red{background:var(--red-l);color:var(--red-d)}
.badge-purple{background:var(--purple-l);color:var(--purple-d)}
.badge-gray{background:#F1EFE8;color:#5F5E5A}
.badge-teal{background:var(--teal-l);color:var(--teal-d)}

/* AVATAR */
.avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.name-cell{display:flex;align-items:center;gap:10px}

/* MODAL */
.modal-backdrop{pointer-events:none;}
.modal-backdrop.open{pointer-events:all;}
.modal-box{pointer-events:all;}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center;padding:1rem}
.modal-backdrop.open{display:flex}
.modal-box{background:var(--white);border-radius:var(--radius);border:0.5px solid var(--gray-border);padding:1.6rem;width:100%;max-width:540px;max-height:90vh;overflow-y:auto}
.modal-title{font-size:16px;font-weight:700;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:0.5px solid var(--gray-border)}
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:13px;color:var(--text-m);margin-bottom:4px;font-weight:600}
.form-row input,.form-row select,.form-row textarea{width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-full{grid-column:1/-1}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:1.2rem;padding-top:1rem;border-top:0.5px solid var(--gray-border)}

/* EMPTY STATE */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-l);font-size:14px}
.empty-icon{font-size:40px;margin-bottom:10px}

/* REMINDER ITEMS */
.reminder-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:0.5px solid var(--gray-border)}
.reminder-item:last-child{border-bottom:none}
.r-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:5px}
.r-body{flex:1}
.r-title{font-size:14px;font-weight:600}
.r-meta{font-size:12px;color:var(--text-m);margin-top:3px}
.r-actions{display:flex;gap:6px;align-items:center}

/* OVERDUE */
.overdue{color:var(--red-d);font-weight:600}
.due-soon{color:var(--amber-d);font-weight:600}

/* DASHBOARD GRID */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;border-left:none;border-bottom:0.5px solid var(--gray-border)}
  .main-content{margin-right:0}
  .form-grid,.form-grid-3{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
}

/* DETAIL PAGE */
.detail-header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:1.4rem}
.detail-avatar{width:58px;height:58px;border-radius:50%;background:var(--purple-l);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex-shrink:0}
.detail-name{font-size:22px;font-weight:700}
.detail-sub{font-size:14px;color:var(--text-m);margin-top:3px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:1rem;padding-top:1rem;border-top:0.5px solid var(--gray-border)}
.info-item label{font-size:12px;color:var(--text-m);display:block;margin-bottom:3px}
.info-item span{font-size:14px;font-weight:500}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width:768px) {
  /* Sidebar hidden on mobile */
  .sidebar {
    position:fixed;top:0;right:-280px;bottom:0;
    width:280px;height:100%;
    flex-direction:column;
    border-left:0.5px solid var(--gray-border);
    z-index:400;
    transition:right .3s ease;
    overflow-y:auto;
    box-shadow:-4px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open { right:0; }
  .mob-overlay { z-index:399; }
  .sidebar-logo { display:flex; }
  .sidebar-user { display:flex; }

  /* Overlay */
  .mob-overlay {
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.4);z-index:299;
  }
  .mob-overlay.open { display:block; }

  /* Hamburger button */
  .mob-menu-btn {
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:none;background:none;
    cursor:pointer;font-size:24px;color:var(--text);
    flex-shrink:0;
  }

  /* Main content */
  .main-content { margin-right:0;padding-bottom:20px; }
  .topbar { padding:.8rem 1rem;position:sticky;top:0;z-index:100; }
  .page-title { font-size:16px; }
  .content-area { padding:1rem; }

  /* Cards & tables */
  .card { padding:1rem; }
  .stats-grid { grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem; }
  .stat-value { font-size:20px; }
  .dash-grid { grid-template-columns:1fr; }
  .form-grid,.form-grid-3 { grid-template-columns:1fr; }
  .table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }
  table { min-width:600px; }

  /* Toolbar */
  .toolbar { flex-wrap:wrap;gap:6px; }
  .toolbar .spacer { display:none; }
  .btn { font-size:12px;padding:7px 12px; }
  .btn-primary { width:100%;justify-content:center; }

  /* Modal */
  .modal-backdrop { padding:.5rem;align-items:flex-end; }
  .modal-box { max-width:100%;border-radius:var(--radius) var(--radius) 0 0;max-height:85vh; }

  /* TD actions */
  .td-actions { flex-wrap:wrap;gap:4px; }
  .btn-sm { font-size:11px;padding:4px 8px; }
}

@media (min-width:769px) {
  .mob-menu-btn { display:none; }
  .mob-overlay { display:none!important; }
}

@media (max-width:400px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-value { font-size:18px; }
}

/* Hide less important columns on mobile */
@media (max-width:768px) {
  /* Clients table - hide less important columns */
  .clients-table th:nth-child(3),
  .clients-table td:nth-child(3),
  .clients-table th:nth-child(4),
  .clients-table td:nth-child(4),
  .clients-table th:nth-child(5),
  .clients-table td:nth-child(5),
  .clients-table th:nth-child(6),
  .clients-table td:nth-child(6) { display:none; }
  
  /* Allow table to fit screen */
  .table-wrap { overflow-x:auto;max-width:100vw; }
  html { overflow-x:hidden; }
}