/* =========================================================
   WOLF DIGITIZING — Shared Theme
   Brand colors extracted from wolfdigitizing.com logo/site:
   Navy #111F3D, Gold #FFDD00, Sky Blue #00ADEE, Charcoal #424043
   ========================================================= */

:root{
  --navy:#111F3D;
  --navy-light:#1b2c54;
  --gold:#FFDD00;
  --gold-dark:#e6c700;
  --sky:#00ADEE;
  --sky-dark:#0090c7;
  --charcoal:#424043;
  --gray:#535353;
  --light-gray:#eef0f4;
  --bg:#f5f6f9;
  --white:#ffffff;
  --success:#1aa260;
  --warning:#e8a400;
  --danger:#d93025;
  --border:#e1e4ea;
  --radius:10px;
  --shadow:0 4px 18px rgba(17,31,61,0.08);
  --shadow-lg:0 10px 35px rgba(17,31,61,0.15);
  --font:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ur:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--charcoal);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body[dir="rtl"]{ font-family:var(--font-ur); }
body[dir="rtl"] input, body[dir="rtl"] textarea, body[dir="rtl"] select{ font-family:var(--font-ur); }

a{color:var(--sky-dark); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,h5,h6{color:var(--navy); margin:0 0 .5em;}
img{max-width:100%;}

.container{max-width:1200px; margin:0 auto; padding:0 24px;}

/* ---------- Top Nav ---------- */
.wd-topbar{
  background:var(--navy);
  color:#cfd6e8;
  font-size:13px;
  padding:6px 0;
}
.wd-topbar .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
.wd-topbar a{color:#cfd6e8;}

.wd-header{
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.wd-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:16px;
}
.wd-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:var(--navy);}
.wd-brand img{height:42px; width:auto;}
.wd-nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.wd-nav a{color:var(--navy); font-weight:600; font-size:14.5px;}
.wd-nav a:hover{color:var(--sky-dark); text-decoration:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; cursor:pointer; font-weight:700;
  font-size:14.5px; padding:12px 26px; transition:all .18s ease; text-decoration:none;
  line-height:1;
}
.btn:hover{text-decoration:none; transform:translateY(-1px);}
.btn-gold{ background:var(--gold); color:var(--navy); box-shadow:0 4px 14px rgba(255,221,0,.35);}
.btn-gold:hover{ background:var(--gold-dark); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-light); color:#fff;}
.btn-sky{ background:var(--sky); color:#fff; }
.btn-sky:hover{ background:var(--sky-dark); color:#fff;}
.btn-outline{ background:transparent; border:2px solid var(--navy); color:var(--navy); padding:10px 24px;}
.btn-outline:hover{ background:var(--navy); color:#fff;}
.btn-danger{ background:var(--danger); color:#fff;}
.btn-sm{ padding:7px 16px; font-size:13px;}
.btn-block{ width:100%; }
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}

/* ---------- Cards / Panels ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  border:1px solid var(--border);
}
.card h3{margin-top:0;}

.stat-card{
  background:var(--white); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px;
}
.stat-card .stat-num{font-size:30px; font-weight:800; color:var(--navy);}
.stat-card .stat-label{font-size:13px; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.3px;}
.stat-card .stat-icon{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; margin-bottom:6px;}

.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }

/* ---------- Forms ---------- */
label{display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:var(--navy);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],
input[type=date],select,textarea{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:8px;
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--charcoal);
  transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--sky); }
.form-group{margin-bottom:18px;}
.form-row{display:flex; gap:16px; flex-wrap:wrap;}
.form-row > *{flex:1; min-width:180px;}
.hint{font-size:12.5px; color:var(--gray); margin-top:4px;}
.error-text{color:var(--danger); font-size:13px; margin-top:4px;}
fieldset{border:1.5px solid var(--border); border-radius:8px; padding:16px; margin-bottom:18px;}
legend{font-weight:700; color:var(--navy); padding:0 8px;}

/* ---------- Badges / Status ---------- */
.badge{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px;
  font-weight:700; text-transform:uppercase; letter-spacing:.3px;
}
.badge-gray{background:#e9ebf0; color:var(--gray);}
.badge-blue{background:#e1f4fd; color:var(--sky-dark);}
.badge-gold{background:#fff8d6; color:#8a7500;}
.badge-green{background:#e3f6ec; color:var(--success);}
.badge-red{background:#fdeaea; color:var(--danger);}
.badge-navy{background:#e4e8f2; color:var(--navy);}

/* ---------- Tables ---------- */
table.wd-table{width:100%; border-collapse:collapse; background:#fff;}
table.wd-table th, table.wd-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); font-size:14px;}
body[dir="rtl"] table.wd-table th, body[dir="rtl"] table.wd-table td{ text-align:right; }
table.wd-table th{ background:var(--light-gray); color:var(--navy); font-weight:700; font-size:12.5px; text-transform:uppercase;}
table.wd-table tr:hover td{ background:#fafbfd; }
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border);}

/* ---------- Layout: App Shell (dashboard) ---------- */
.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
  width:255px; background:var(--navy); color:#cfd6e8; flex-shrink:0;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 0;
}
.app-sidebar .brand{display:flex; align-items:center; gap:10px; padding:0 20px 20px; font-weight:700; color:#fff; font-size:18px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:14px;}
.app-sidebar .brand img{height:36px;}
.app-sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:11px 22px; color:#b9c2da;
  font-weight:600; font-size:14px; border-left:3px solid transparent;
}
body[dir="rtl"] .app-sidebar nav a{ border-left:none; border-right:3px solid transparent; }
.app-sidebar nav a:hover{ background:rgba(255,255,255,.06); color:#fff; text-decoration:none;}
.app-sidebar nav a.active{ background:rgba(255,221,0,.12); color:var(--gold); border-left-color:var(--gold);}
body[dir="rtl"] .app-sidebar nav a.active{ border-right-color:var(--gold); border-left-color:transparent;}
.app-sidebar nav .section-label{ padding:16px 22px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#7c87a8; font-weight:700;}
.app-main{flex:1; min-width:0;}
.app-topbar{
  background:#fff; border-bottom:1px solid var(--border); padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50;
}
.app-content{padding:28px;}
@media(max-width:900px){
  .app-shell{flex-direction:column;}
  .app-sidebar{width:100%; height:auto; position:relative; padding:12px 0;}
  .app-sidebar nav{display:flex; overflow-x:auto;}
  .app-sidebar nav a{white-space:nowrap; border-left:none; border-bottom:3px solid transparent;}
  .app-sidebar nav a.active{border-left:none; border-bottom-color:var(--gold);}
  .app-sidebar .section-label{display:none;}
}

.user-chip{display:flex; align-items:center; gap:10px;}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--sky); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}

/* ---------- Misc ---------- */
.muted{color:var(--gray);}
.center{text-align:center;}
.flex{display:flex;}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mt-0{margin-top:0;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-0{margin-bottom:0;} .mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.divider{border:none; border-top:1px solid var(--border); margin:20px 0;}
.pill-steps{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
.pill-steps span{padding:7px 16px; border-radius:999px; background:var(--light-gray); color:var(--gray); font-weight:700; font-size:13px;}
.pill-steps span.active{background:var(--navy); color:#fff;}
.pill-steps span.done{background:var(--success); color:#fff;}

.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy) 0%,#1a2d5c 60%, var(--sky) 180%); padding:40px 16px;}
.auth-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:40px; width:100%; max-width:440px;}
.auth-logo{display:flex; justify-content:center; margin-bottom:18px;}
.auth-logo img{height:60px;}

.toast-wrap{position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px;}
body[dir="rtl"] .toast-wrap{right:auto; left:20px;}
.toast{background:var(--navy); color:#fff; padding:13px 20px; border-radius:8px; box-shadow:var(--shadow-lg); font-size:14px; min-width:240px; animation:slideIn .25s ease;}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
.toast.info{background:var(--sky-dark);}
@keyframes slideIn{from{transform:translateX(30px); opacity:0;} to{transform:translateX(0); opacity:1;}}

.dropzone{
  border:2px dashed var(--sky); border-radius:var(--radius); padding:36px 20px; text-align:center;
  background:#f3fbff; cursor:pointer; transition:background .15s;
}
.dropzone.dragover{background:#e1f4fd;}
.dropzone i{font-size:34px; color:var(--sky); margin-bottom:10px;}

.file-chip{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--light-gray); border-radius:8px; padding:10px 14px; margin-top:8px; font-size:13.5px;}
.file-chip button{background:none; border:none; color:var(--danger); cursor:pointer; font-weight:700;}

.modal-overlay{position:fixed; inset:0; background:rgba(17,31,61,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;}
.modal-box{background:#fff; border-radius:12px; padding:28px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg);}

.notice-banner{ background:#fff8d6; border:1px solid #f0e2a0; color:#7a6900; padding:12px 18px; border-radius:8px; font-size:13.5px; margin-bottom:18px;}
.notice-banner.info{ background:#e1f4fd; border-color:#bfe8fa; color:#0b5f80;}
.notice-banner.danger{ background:#fdeaea; border-color:#f3c6c6; color:#8a1f1f;}

footer.wd-footer{background:var(--navy); color:#9aa6c4; padding:30px 0; margin-top:60px; font-size:13.5px;}
footer.wd-footer a{color:#cfd6e8;}
footer.wd-footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.lang-switch{display:flex; gap:4px; background:var(--light-gray); border-radius:999px; padding:3px;}
.lang-switch button{border:none; background:transparent; padding:6px 14px; border-radius:999px; font-weight:700; font-size:12.5px; cursor:pointer; color:var(--gray);}
.lang-switch button.active{background:var(--navy); color:#fff;}

.empty-state{text-align:center; padding:50px 20px; color:var(--gray);}
.empty-state i{font-size:40px; color:var(--border); margin-bottom:14px;}

.timeline{list-style:none; margin:0; padding:0;}
.timeline li{position:relative; padding:0 0 22px 28px; border-left:2px solid var(--border);}
body[dir="rtl"] .timeline li{padding:0 28px 22px 0; border-left:none; border-right:2px solid var(--border);}
.timeline li::before{content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--border);}
body[dir="rtl"] .timeline li::before{left:auto; right:-7px;}
.timeline li.done::before{background:var(--success);}
.timeline li.current::before{background:var(--gold); box-shadow:0 0 0 4px rgba(255,221,0,.3);}
.timeline li:last-child{border-color:transparent;}