@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
/* ===================================================
   نظام المراقب — ثيم فاتح احترافي مع لمسات زرقاء
   =================================================== */


:root {
  --bg:         #f0f4f8;
  --bg2:        #ffffff;
  --bg3:        #f7f9fc;
  --bg4:        #eef2f7;
  --border:     #dde3ec;
  --border2:    #c8d2e0;
  --navy:       #1a3557;
  --navy-2:     #1e4080;
  --navy-3:     #25518f;
  --blue:       #2563eb;
  --blue-light: #3b82f6;
  --blue-dim:   #dbeafe;
  --blue-ring:  rgba(37,99,235,.22);
  --green:      #16a34a;
  --green-dim:  #dcfce7;
  --red:        #dc2626;
  --red-dim:    #fee2e2;
  --text:       #0f172a;
  --text2:      #374151;
  --text3:      #64748b;
  --text4:      #94a3b8;
  --radius:     10px;
  --radius-lg:  14px;
  --shadow:     0 4px 20px rgba(26,53,87,.09), 0 1px 4px rgba(26,53,87,.06);
  --shadow-md:  0 8px 32px rgba(26,53,87,.12), 0 2px 8px rgba(26,53,87,.07);
  --shadow-sm:  0 2px 8px rgba(26,53,87,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Tajawal', system-ui, -apple-system, sans-serif;
  font-size:15px;line-height:1.65;
  color:var(--text);background:var(--bg);min-height:100vh;
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg4)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--navy-2)}

/* TOPBAR */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--navy);
  border-bottom:3px solid var(--blue);
  box-shadow:0 2px 12px rgba(26,53,87,.25);
}

.brand-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  color:#fff;font-weight:700;font-size:.95rem;
  text-decoration:none;padding:.3rem 0;
}
.brand-badge i{font-size:1.15rem;color:#60a5fa}

/* CARDS */
.sys-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;
}
.sys-card-header{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);
  padding:15px 20px;display:flex;align-items:center;gap:.75rem;
}
.sys-card-header .header-icon{
  width:36px;height:36px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#93c5fd;font-size:1rem;
  flex-shrink:0;border:1px solid rgba(255,255,255,.12);
}
.sys-card-header .card-title{margin:0;font-size:.93rem;font-weight:700;color:#fff}
.sys-card-header .card-sub{font-size:.77rem;color:#93c5fd;margin-top:1px}
.sys-card-body{padding:20px}

/* FORM */
.form-label{
  font-weight:600;color:var(--text2);font-size:.83rem;
  margin-bottom:.38rem;display:block;
}
.form-control,.form-select{
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  padding:.58rem .85rem;font-size:.92rem;font-family:inherit;
  width:100%;transition:border-color .18s,box-shadow .18s,background .18s;
}
.form-control::placeholder{color:var(--text4)}
.form-select option{background:#fff;color:var(--text)}
.form-control:focus,.form-select:focus{
  background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-ring);outline:none;
}
.form-control:hover:not(:focus),.form-select:hover:not(:focus){
  border-color:var(--border2);background:#fff;
}

.hint-text{font-size:.78rem;color:var(--text3);display:flex;align-items:center;gap:.3rem;margin-top:.35rem}

/* BUTTONS */
.btn{
  font-family:inherit;font-weight:600;font-size:.88rem;
  border-radius:var(--radius);padding:.5rem 1.1rem;transition:all .18s;
  cursor:pointer;display:inline-flex;align-items:center;gap:.42rem;
  text-decoration:none;border:1.5px solid transparent;white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--navy-2),var(--navy-3));
  color:#fff;box-shadow:0 2px 8px rgba(26,53,87,.22);
}
.btn-primary:hover{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,53,87,.28)}

.btn-blue{
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.2);
}
.btn-blue:hover{filter:brightness(1.07);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,.28)}

.btn-outline{background:transparent;color:var(--text2);border-color:var(--border2)}
.btn-outline:hover{background:var(--bg4);color:var(--navy);border-color:var(--navy)}

.btn-outline-navy{background:transparent;color:var(--navy);border-color:var(--navy-2)}
.btn-outline-navy:hover{background:var(--navy);color:#fff}

.btn-outline-blue{background:transparent;color:var(--blue);border-color:#bfdbfe}
.btn-outline-blue:hover{background:var(--blue-dim);color:var(--navy);border-color:#93c5fd}

.btn-outline-green{background:transparent;color:var(--green);border-color:#bbf7d0}
.btn-outline-green:hover{background:var(--green-dim);color:#15803d;border-color:#86efac}

.btn-outline-red{background:transparent;color:var(--red);border-color:#fecaca}
.btn-outline-red:hover{background:var(--red-dim);color:#b91c1c;border-color:#fca5a5}

.btn-sm{font-size:.8rem;padding:.34rem .75rem;border-radius:7px}
.btn-lg{font-size:.98rem;padding:.65rem 1.5rem}

/* SECTION COUNTER */
.section-counter{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;
  font-size:.7rem;font-weight:800;flex-shrink:0;
  border:1px solid rgba(255,255,255,.22);
}

/* UPLOAD */
.upload-zone{
  border:1.5px dashed var(--border2);border-radius:var(--radius);
  background:var(--bg3);padding:16px;
  transition:border-color .2s,background .2s;
  display:flex;flex-direction:column;gap:10px;
}
.upload-zone:hover{border-color:var(--blue);background:#eff6ff}
.upload-actions{display:flex;gap:8px;flex-wrap:wrap}

/* IMAGE PREVIEW */
.img-preview-wrap{
  display:none;border:1.5px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  background:var(--bg3);width:max-content;max-width:100%;
}
.img-preview-wrap img{display:block;max-width:240px;max-height:180px;object-fit:contain}

/* TABLE */
.sys-table-wrap{overflow-x:auto}
.sys-table{width:100%;border-collapse:collapse;font-size:.88rem}
.sys-table thead th{
  background:var(--bg3);color:var(--text3);font-weight:600;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;
  padding:11px 14px;border-bottom:2px solid var(--border);white-space:nowrap;
}
.sys-table tbody tr{border-bottom:1px solid var(--bg4);transition:background .12s}
.sys-table tbody tr:hover{background:#eff6ff}
.sys-table tbody tr:last-child{border-bottom:none}
.sys-table td{padding:10px 14px;color:var(--text);vertical-align:middle}

/* BADGE PILL */
.badge-pill{
  display:inline-block;padding:.18rem .65rem;border-radius:99px;
  font-size:.74rem;font-weight:600;
  background:var(--blue-dim);color:var(--navy-2);border:1px solid #bfdbfe;
}

/* STAT CHIP */
.stat-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .8rem;border-radius:7px;font-size:.82rem;font-weight:600;
  background:#fff;border:1px solid var(--border);color:var(--text2);
  box-shadow:var(--shadow-sm);
}
.stat-chip .val{color:var(--navy);font-size:.94rem}

/* ALERTS */
.alert-danger-light{
  background:var(--red-dim);border:1px solid #fca5a5;color:#991b1b;
  border-radius:var(--radius);padding:.7rem 1rem;font-size:.88rem;
  display:flex;align-items:center;gap:.5rem;
}

/* PAGINATION */
.sys-pagination{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sys-pagination a,.sys-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 8px;border-radius:7px;
  font-size:.82rem;font-weight:600;text-decoration:none;
  border:1.5px solid var(--border);color:var(--text2);background:#fff;
  transition:all .15s;box-shadow:var(--shadow-sm);
}
.sys-pagination a:hover{background:var(--blue-dim);color:var(--navy);border-color:#93c5fd}
.sys-pagination .active{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important;box-shadow:0 2px 8px rgba(26,53,87,.22)}
.sys-pagination .disabled{opacity:.4;pointer-events:none}

/* SEARCH GRID */
.search-input-group{display:grid;gap:10px}
@media(min-width:768px){.search-input-group{grid-template-columns:2fr 1.4fr 1.4fr 2fr 80px 110px;align-items:end}}

/* FORM GRIDS */
.form-grid-2{display:grid;gap:14px}
.form-grid-3{display:grid;gap:14px}
@media(min-width:768px){.form-grid-2{grid-template-columns:1fr 1fr}.form-grid-3{grid-template-columns:1fr 1fr 1fr}}

/* PHOTO BLOCK */
.photo-block{display:grid;gap:16px}
@media(min-width:768px){.photo-block{grid-template-columns:1fr 1fr;align-items:start}}

/* SITE CREDIT */
.site-credit{
  position:fixed;inset-inline-end:14px;inset-block-end:14px;
  background:rgba(255,255,255,.97);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);padding:6px 14px;border-radius:99px;
  font-size:.73rem;z-index:9999;color:var(--text3);white-space:nowrap;
}
.site-credit a{text-decoration:none;font-weight:700;color:var(--navy-2)}

/* PRINT */
@media print{.site-credit,.topbar,.noprint{display:none!important}body{background:#fff!important}}

/* MOBILE */
@media(max-width:768px){
  .sys-card-body{padding:14px}
  .sys-card-header{padding:12px 16px}
  body{font-size:14px}
  .btn{font-size:.82rem;padding:.44rem .9rem}
}
@media(max-width:480px){
  .upload-actions{flex-direction:column}
  .upload-actions .btn{width:100%;justify-content:center}
}