/* ============================================================
   assets/css/style.css — ธีม ISS "Gradient" ม่วง-ฟ้า (ปรับทั้งระบบ)
   ============================================================ */
:root{
  --iss-grad: linear-gradient(135deg,#6d28d9 0%,#4f46e5 45%,#2563eb 100%);
  --iss-grad-soft: linear-gradient(135deg,#7c3aed 0%,#3b82f6 100%);
  --iss-primary:#5b21b6;
  --iss-primary-2:#2563eb;
  --iss-accent:#ec4899;
  --iss-ink:#1e2340;
  --iss-muted:#6b7390;
  --iss-bg:#eef1f9;
  --iss-card-radius:18px;
  --iss-sidebar-w:258px;
  --iss-topbar-h:60px;
}

*{scrollbar-width:thin;scrollbar-color:#b9a7ef transparent;}
body{
  font-family:"Sarabun","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(1200px 500px at 100% -10%,rgba(124,58,237,.10),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,rgba(37,99,235,.10),transparent 55%),
    var(--iss-bg);
  color:var(--iss-ink);
  min-height:100vh;
}

/* ---------- Topbar ---------- */
.iss-topbar{
  background:var(--iss-grad);height:var(--iss-topbar-h);
  box-shadow:0 4px 20px rgba(79,70,229,.28);backdrop-filter:saturate(1.2);
}
.iss-topbar .navbar-brand{font-weight:700;letter-spacing:.3px;}
.iss-topbar .dropdown-menu{border:none;border-radius:14px;box-shadow:0 10px 40px rgba(30,35,64,.18);}

/* ---------- Layout ---------- */
.iss-wrapper{display:flex;padding-top:var(--iss-topbar-h);}
.iss-sidebar{
  width:var(--iss-sidebar-w);min-height:calc(100vh - var(--iss-topbar-h));
  position:fixed;top:var(--iss-topbar-h);bottom:0;overflow-y:auto;
  background:linear-gradient(180deg,#5b21b6 0%,#4338ca 50%,#1d4ed8 100%);
  padding:14px 12px;
}
.iss-main{flex:1;margin-left:0;min-width:0;}
@media (min-width:992px){.iss-main{margin-left:var(--iss-sidebar-w);}}

/* ---------- Sidebar links ---------- */
.iss-sidebar .nav-link,.iss-offcanvas .nav-link{
  color:rgba(255,255,255,.82);padding:.72rem .95rem;border-radius:12px;margin-bottom:4px;
  font-weight:500;display:flex;align-items:center;transition:.18s;position:relative;
}
.iss-sidebar .nav-link i,.iss-offcanvas .nav-link i{font-size:1.1rem;width:26px;}
.iss-sidebar .nav-link:hover,.iss-offcanvas .nav-link:hover{
  color:#fff;background:rgba(255,255,255,.12);transform:translateX(3px);
}
.iss-sidebar .nav-link.active,.iss-offcanvas .nav-link.active{
  color:#5b21b6;background:#fff;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.iss-offcanvas{width:var(--iss-sidebar-w);
  background:linear-gradient(180deg,#5b21b6 0%,#4338ca 50%,#1d4ed8 100%);padding:0 12px 12px;}
.iss-offcanvas .offcanvas-header{background:transparent;color:#fff;}

/* ---------- Cards ---------- */
.card{
  border:none;border-radius:var(--iss-card-radius);background:#fff;
  box-shadow:0 6px 24px rgba(40,40,90,.07);transition:.2s;
}
.card:hover{box-shadow:0 10px 30px rgba(40,40,90,.10);}
.card-header{border-radius:var(--iss-card-radius) var(--iss-card-radius) 0 0 !important;
  background:#f6f4fe;border-bottom:1px solid #ece8fb;font-weight:600;}

/* ---------- Stat cards (กราฟิกพื้นไล่สี ไอคอนใหญ่) ---------- */
.stat-card{
  border:none;border-radius:var(--iss-card-radius);color:#fff;overflow:hidden;position:relative;
  box-shadow:0 10px 26px rgba(40,40,90,.16);
}
.stat-card .card-body{position:relative;z-index:1;}
.stat-card .stat-icon{
  font-size:2.4rem;opacity:.95;
}
.stat-card .stat-bg-icon{
  position:absolute;right:-12px;bottom:-18px;font-size:6rem;opacity:.18;z-index:0;line-height:1;
}
.stat-card .text-muted,.stat-card .small{color:rgba(255,255,255,.85)!important;}
.sc-1{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.sc-2{background:linear-gradient(135deg,#2563eb,#38bdf8);}
.sc-3{background:linear-gradient(135deg,#059669,#34d399);}
.sc-4{background:linear-gradient(135deg,#ea580c,#fbbf24);}
.sc-5{background:linear-gradient(135deg,#db2777,#f472b6);}
.sc-6{background:linear-gradient(135deg,#0891b2,#22d3ee);}

/* ---------- Buttons ---------- */
.btn{border-radius:11px;font-weight:500;transition:.18s;}
.btn-primary{background:var(--iss-grad);border:none;box-shadow:0 6px 16px rgba(79,70,229,.30);}
.btn-primary:hover,.btn-primary:focus{background:var(--iss-grad-soft);box-shadow:0 8px 22px rgba(79,70,229,.40);transform:translateY(-1px);}
.btn-success{background:linear-gradient(135deg,#059669,#10b981);border:none;}
.btn-danger{background:linear-gradient(135deg,#dc2626,#f43f5e);border:none;}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#fbbf24);border:none;color:#3a2a00;}
.btn-outline-primary{border:1.5px solid #7c3aed;color:#6d28d9;}
.btn-outline-primary:hover{background:var(--iss-grad);border-color:transparent;color:#fff;}
.btn-outline-secondary{border-radius:11px;}

/* ---------- Titles & text ---------- */
.page-title{
  font-weight:800;background:var(--iss-grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;
}

/* ---------- Badges ---------- */
.badge{font-weight:600;border-radius:8px;padding:.4em .7em;}

/* ---------- Tables ---------- */
.table{--bs-table-hover-bg:#f4f1fe;}
.table thead th{color:var(--iss-muted);font-weight:600;border-bottom:2px solid #ece8fb;
  text-transform:none;font-size:.92rem;}
.table td,.table th{vertical-align:middle;}

/* ---------- Forms ---------- */
.form-control,.form-select{border-radius:11px;border:1.5px solid #e2e0f0;padding:.5rem .8rem;}
.form-control:focus,.form-select:focus{border-color:#7c3aed;box-shadow:0 0 0 .2rem rgba(124,58,237,.15);}
.form-label{font-weight:600;color:var(--iss-ink);font-size:.92rem;}
.input-group-text{border-radius:11px;background:#f3f0fe;border:1.5px solid #e2e0f0;color:#6d28d9;}

/* ---------- Modal ---------- */
.modal-content{border:none;border-radius:18px;box-shadow:0 20px 60px rgba(30,35,64,.25);}
.modal-header{background:#f6f4fe;border-radius:18px 18px 0 0;border-bottom:1px solid #ece8fb;}
.modal-title{font-weight:700;color:var(--iss-primary);}

/* ---------- Alerts ---------- */
.alert{border:none;border-radius:13px;}

/* ---------- Login ---------- */
.login-page{
  min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#6d28d9 0%,#4f46e5 45%,#2563eb 100%);
}
.login-page::before,.login-page::after{
  content:"";position:absolute;border-radius:50%;filter:blur(8px);opacity:.35;
}
.login-page::before{width:420px;height:420px;background:#a855f7;top:-120px;right:-80px;}
.login-page::after{width:360px;height:360px;background:#38bdf8;bottom:-120px;left:-90px;}
.login-card{
  max-width:430px;width:100%;border-radius:24px;position:relative;z-index:2;
  box-shadow:0 30px 70px rgba(20,10,60,.45);backdrop-filter:blur(4px);
}
.login-logo{
  display:inline-flex;width:84px;height:84px;align-items:center;justify-content:center;
  border-radius:24px;background:var(--iss-grad);color:#fff;font-size:2.6rem;
  box-shadow:0 12px 30px rgba(79,70,229,.4);
}

/* ---------- Report-style content components (ใช้ในหน้าแสดง/บันทึกผลนิเทศ) ---------- */
.iss-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;}
.iss-info .it{background:#f7f6fe;border:1px solid #ece8fb;border-radius:12px;padding:9px 14px;}
.iss-info .it .l{font-size:.78rem;color:#7c7fa3;font-weight:600;}
.iss-info .it .v{font-weight:600;color:var(--iss-ink);}
.iss-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.iss-sum .c{border-radius:16px;padding:18px;text-align:center;color:#fff;box-shadow:0 10px 24px rgba(40,40,90,.14);}
.iss-sum .c .t{font-size:.86rem;opacity:.92;}
.iss-sum .c .v{font-size:2rem;font-weight:800;line-height:1.1;margin-top:4px;}
.iss-sum .c .u{font-size:.78rem;opacity:.85;}
.iss-sum .c1{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.iss-sum .c2{background:linear-gradient(135deg,#2563eb,#38bdf8);}
.iss-catbar{
  background:linear-gradient(135deg,#f0ecfe,#eaf1ff)!important;color:#4f46e5!important;font-weight:700;
  border-left:5px solid #6d28d9;display:flex;justify-content:space-between;align-items:center;padding:11px 16px;
}
.iss-catbar .badge{background:var(--iss-grad);color:#fff;}
.iss-note{border-radius:14px;padding:14px 16px;border:1px solid #eee;height:100%;}
.iss-note h6{display:flex;align-items:center;gap:6px;font-weight:700;}
.iss-note p{white-space:pre-line;margin:0;color:#3a3f5c;}
.iss-note.good{background:#ecfdf5;border-color:#bbf7d0;} .iss-note.good h6{color:#059669;}
.iss-note.warn{background:#fffbeb;border-color:#fde68a;} .iss-note.warn h6{color:#d97706;}
.iss-note.tip{background:#eff6ff;border-color:#bfdbfe;} .iss-note.tip h6{color:#2563eb;}
.iss-ack{background:#f7f6fe;border:1px dashed #c7bdf3;border-radius:12px;padding:12px 16px;}
@media (max-width:640px){.iss-sum{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
footer{color:var(--iss-muted);}

/* ---------- Notification list ---------- */
.list-group-item-action:hover{background:#f4f1fe;}

/* ---------- DataTables tweaks ---------- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--iss-grad)!important;border:none!important;border-radius:9px;color:#fff!important;}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{border-radius:9px;border:1.5px solid #e2e0f0;}
/* กล่อง "แสดง _ แถว": กันตัวเลขชนกับลูกศร dropdown และกว้างพอ */
.dataTables_wrapper .dataTables_length select{
  width:auto;min-width:4.5rem;padding-right:2rem;
  background-position:right .6rem center;}
.dataTables_wrapper .dataTables_length label{
  display:inline-flex;align-items:center;gap:.5rem;}