/* =========================================================
   UIS Smart Campus — Admin Panel v2
   Redesigned to match the app: Cairo typeface, softer surfaces,
   larger radii, smoother transitions — same class names as v1
   so no Blade views needed to change, just this stylesheet.
   ========================================================= */
:root{
  --maroon:#742420; --maroon-dark:#3D1414; --maroon-light:#8A2E29;
  --gold:#AD8036; --gold-dark:#8E6726;
  --cream:#FBF8F3; --cream-2:#F3EDE1; --line:#EAE2D2;
  --ink:#241A14; --ink-2:#5C4C3E; --muted:#93846F;
  --white:#fff; --danger:#B33A34; --ok:#4E7A3F;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(58,25,20,.04), 0 8px 22px rgba(58,25,20,.06);
  --shadow-lg:0 16px 40px rgba(58,25,20,.12);
  --ease:cubic-bezier(.34,1.3,.62,1);
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
  background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.layout{display:flex; min-height:100vh;}

/* Sidebar */
.sidebar{width:256px; background:var(--maroon-dark); color:#fff; flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.sidebar .brand{display:flex; align-items:center; gap:11px; padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar .brand img{width:40px;height:40px;border-radius:50%; object-fit:cover; background:#F4D9AE; box-shadow:0 0 0 3px rgba(255,255,255,.12);}
.sidebar .brand b{font-size:14px; display:block; font-weight:800;}
.sidebar .brand span{font-size:11px; color:rgba(255,255,255,.55);}
.sidebar nav{flex:1; overflow-y:auto; padding:12px 10px;}
.sidebar nav::-webkit-scrollbar{width:5px;}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:4px;}
.sidebar .group-title{font-size:10px; color:rgba(255,255,255,.38); text-transform:uppercase; letter-spacing:.09em; padding:16px 10px 6px; font-weight:700;}
.sidebar a.link{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; margin-bottom:2px; font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,.78); border-radius:10px;
  transition:background .2s var(--ease), color .2s, transform .15s var(--ease);
}
.sidebar a.link:hover{background:rgba(255,255,255,.07); color:#fff;}
.sidebar a.link:active{transform:scale(.98);}
.sidebar a.link.active{background:rgba(255,255,255,.13); color:#fff; font-weight:800; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.sidebar .badge{background:var(--gold); color:#2A1E17; font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px;}
.sidebar form.logout{padding:14px 18px; border-top:1px solid rgba(255,255,255,.08);}
.sidebar .logout-btn{
  width:100%; padding:10px; background:rgba(255,255,255,.07); border:none; color:#fff;
  border-radius:10px; cursor:pointer; font-size:13px; font-weight:700; font-family:inherit;
  transition:background .2s, transform .15s var(--ease);
}
.sidebar .logout-btn:hover{background:rgba(255,255,255,.13);}
.sidebar .logout-btn:active{transform:scale(.97);}

/* Main */
.main{flex:1; min-width:0;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:18px 28px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:18px; margin:0; font-weight:800; letter-spacing:-.01em;}
.content{padding:26px 28px;}

.flash{padding:13px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:13.5px; font-weight:600; animation:flashIn .35s var(--ease);}
@keyframes flashIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
.flash.success{background:#EBF4E4; color:var(--ok); border:1px solid #d3e6c4;}
.flash.error{background:#FBEAEA; color:var(--danger); border:1px solid #f0c7c5;}

.card{background:#fff; border:none; border-radius:var(--radius); box-shadow:var(--shadow); transition:box-shadow .25s var(--ease);}
.card-header{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line);}
.card-header h2{font-size:15.5px; margin:0; font-weight:800;}
.card-body{padding:22px;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:26px;}
.stat-card{background:#fff; border:none; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.stat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.stat-card .n{font-size:26px; font-weight:900; color:var(--maroon);}
.stat-card .l{font-size:12px; color:var(--muted); margin-top:5px; font-weight:600;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:start; background:var(--cream-2); color:var(--ink-2); font-weight:700; padding:11px 16px; font-size:11.5px; letter-spacing:.01em;}
th:first-child{border-start-start-radius:10px;}
th:last-child{border-start-end-radius:10px;}
td{padding:12px 16px; border-top:1px solid var(--line); vertical-align:middle;}
tr{transition:background .15s;}
tr:hover td{background:#FCFAF5;}
.thumb-sm{width:46px;height:46px;border-radius:10px; object-fit:cover; background:var(--cream-2);}

.btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:999px;
  border:none; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:transform .15s var(--ease), opacity .15s, box-shadow .2s;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--maroon); color:#fff; box-shadow:0 4px 14px rgba(116,36,32,.25);}
.btn-primary:hover{box-shadow:0 6px 18px rgba(116,36,32,.32);}
.btn-gold{background:var(--gold); color:#fff; box-shadow:0 4px 14px rgba(173,128,54,.25);}
.btn-outline{background:#fff; border:1.5px solid var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--maroon); color:var(--maroon);}
.btn-danger{background:#fff; border:1.5px solid #f0c7c5; color:var(--danger);}
.btn-danger:hover{background:#FBEAEA;}
.btn-sm{padding:7px 13px; font-size:12px;}

.badge-pill{display:inline-block; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700;}
.badge-published, .badge-completed, .badge-resolved{background:#EBF4E4; color:var(--ok);}
.badge-draft, .badge-pending, .badge-new{background:#FBF2DE; color:#8a6d24;}
.badge-in_review, .badge-in_progress{background:#EDEBFA; color:#5646b0;}
.badge-rejected{background:#FBEAEA; color:var(--danger);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-group{margin-bottom:18px;}
.form-group.full{grid-column:1/-1;}
label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:7px;}
label .hint{font-weight:400; color:var(--muted); font-size:11px;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea{
  width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:13.5px; font-family:inherit; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
textarea{resize:vertical; min-height:90px;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--maroon); box-shadow:0 0 0 3px rgba(116,36,32,.08);}
.error-text{color:var(--danger); font-size:11.5px; margin-top:4px;}
input[type=file]{padding:9px 0; font-size:13px;}
.current-image{width:90px;height:90px;border-radius:12px;object-fit:cover; margin-bottom:8px; border:1px solid var(--line);}
.checkbox-row{display:flex; align-items:center; gap:8px;}
.checkbox-row input{width:auto;}

.pagination{margin-top:20px; display:flex; gap:6px; flex-wrap:wrap;}
.pagination a, .pagination span{padding:7px 13px; border-radius:999px; font-size:12.5px; border:1px solid var(--line); background:#fff; transition:background .2s, border-color .2s;}
.pagination a:hover{border-color:var(--maroon); color:var(--maroon);}
.pagination .active span{background:var(--maroon); color:#fff; border-color:var(--maroon);}

.filters{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.filters select, .filters input{width:auto; min-width:160px;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--maroon-dark); padding:20px;}
.login-card{width:380px; background:#fff; border-radius:24px; padding:36px 30px; box-shadow:0 24px 70px rgba(0,0,0,.35); text-align:center; animation:cardIn .4s var(--ease);}
@keyframes cardIn{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.login-card img{width:68px;height:68px;border-radius:50%; margin-bottom:16px; background:#F4D9AE; object-fit:cover;}
.login-card h1{font-size:18px; margin:0 0 5px; font-weight:800;}
.login-card p{font-size:12.5px; color:var(--muted); margin:0 0 24px;}
.login-card .form-group{text-align:start;}
.login-card .btn{width:100%; justify-content:center; padding:12px; border-radius:var(--radius-sm);}

.text-muted{color:var(--muted); font-size:12.5px;}
.empty-row td{text-align:center; padding:44px; color:var(--muted);}
.inline-list{list-style:none; margin:0; padding:0;}
.inline-list li{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line);}

::selection{background:var(--gold); color:#fff;}