/* =========================================================
   STVFRAMEWORK ADMIN THEME
   Clean Modern Admin UI
   Compatible with RBAC, Dynamic Menus, Shared Hosting
========================================================= */


/* =========================================================
   BASE RESET
========================================================= */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f4f6f9;
    color: #111827;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.layout {
    display: flex;
    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    width: 240px;
    background: #1f2937;
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: left 0.3s ease;
}

.sidebar h3 {
    padding: 16px;
    margin: 0;
    font-size: 18px;
    border-bottom: 1px solid #374151;
}

/* menu links */

.sidebar a {
    padding: 12px 16px;
    text-decoration: none;
    color: #cbd5e1;
    position: relative;

    display:flex;
    align-items:center;
    gap:10px;

    transition: background .25s ease, color .25s ease, transform .2s ease;
}

/* hover */

.sidebar a:hover {
    background: #374151;
    color: #ffffff;
}

/* active menu */

.sidebar a.active {
    background: #374151;
    color: #ffffff;
}

/* left active indicator */

.sidebar a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #22c55e;
    opacity: 0;
}

.sidebar a:hover::before,
.sidebar a.active::before {
    opacity: 1;
}



/* =========================================================
   SIDEBAR ICONS
========================================================= */

.sidebar .icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;

    color:#facc15;   /* golden yellow */
    opacity:.9;

    transition:color .25s ease, transform .2s ease;
}

/* SVG inherits sidebar color */

.sidebar .icon svg{
stroke:currentColor;
fill:currentColor;
transition:filter .25s ease;
}

.sidebar a:hover .icon svg{
filter:drop-shadow(0 0 3px rgba(250,204,21,.6));
}

/* hover */

.sidebar a:hover .icon{
    color:#ffffff;
    opacity:1;
    transform:scale(1.05);
}

/* active */

.sidebar a.active .icon{
    color:#eab308; /* darker gold */
}

.sidebar a:hover{
transform:translateX(3px);
}

.sidebar{
overflow-y:auto;
}
/* =========================================================
   MAIN CONTENT
========================================================= */

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* =========================================================
   HEADER
========================================================= */

header{
height:56px;
background:#e6f4ea;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
border-bottom:1px solid #c7e6d2;

position:sticky;
top:0;
z-index:500;

box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

header .brand {
    font-weight: 600;
}

header .user {
    font-size: 14px;
}

header .user a {
    text-decoration: none;
    color: #166534;
    font-weight: 500;
}


/* =========================================================
   MAIN PAGE CONTENT
========================================================= */

main {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}


/* =========================================================
   DASHBOARD CARDS
========================================================= */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.card p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}


/* =========================================================
   TABLES
========================================================= */

.table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.table th {
    background: #f9fafb;
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.table td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.table tr:hover {
    background: #f9fafb;
}



.table-search{
padding:8px 12px;
border:1px solid #e5e7eb;
border-radius:6px;
width:240px;
}
/* =========================================================
   BUTTONS
========================================================= */

.btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
}

.btn-secondary {
    background: #64748b;
    color: #ffffff;
}


/* =========================================================
   BADGES
========================================================= */

.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background: #fef9c3;
    color: #854d0e;
}

/* ===============================
   TABLE TOOLBAR
================================ */

.table-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
}

/* ===============================
   TABLE CONTAINER
================================ */

.table-container{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
overflow-x:auto;
}

/* ===============================
   TABLE IMPROVEMENTS
================================ */



.table thead{
background:#f9fafb;
}

.table th{
text-align:left;
padding:12px;
font-size:14px;
border-bottom:1px solid #e5e7eb;
}

.table td{
padding:12px;
border-bottom:1px solid #f1f5f9;
}

.table tbody tr:hover{
background:#f9fafb;
}

/* ===============================
   SMALL BUTTON
================================ */

.btn-sm{
padding:4px 10px;
font-size:12px;
}

/* ===============================
   ROLE BADGE
================================ */

.badge-role{
background:#e0f2fe;
color:#0369a1;
}


/* ===============================
   FORM CONTAINER
================================ */

.form-container{
background:white;
padding:24px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
max-width:600px;
}

/* ===============================
   FORM GROUP
================================ */

.form-group{
margin-bottom:18px;
display:flex;
flex-direction:column;
}

.form-group label{
font-weight:600;
margin-bottom:6px;
font-size:14px;
}

/* ===============================
   INPUTS
================================ */

.form-group input,
.form-group select{
padding:10px 12px;
border:1px solid #d1d5db;
border-radius:6px;
font-size:14px;
transition:border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus{
outline:none;
border-color:#2563eb;
}

/* ===============================
   FORM ACTIONS
================================ */

.form-actions{
margin-top:20px;
display:flex;
gap:10px;
}

/* ===============================
   SEARCH BOX
================================ */

.search-box{
padding:8px 12px;
border:1px solid #d1d5db;
border-radius:6px;
width:220px;
}


/* ===============================
   PAGINATION
================================ */

.pagination{
margin-top:16px;
display:flex;
gap:6px;
}

.page-btn{
padding:6px 10px;
border:1px solid #d1d5db;
background:white;
cursor:pointer;
border-radius:4px;
}

.page-btn.active{
background:#2563eb;
color:white;
border-color:#2563eb;
}



/* =================================
ADVANCED TOAST SYSTEM
================================= */

#toast-container{
position:fixed;
top:20px;
right:20px;
z-index:9999;
display:flex;
flex-direction:column;
gap:10px;
pointer-events:none;
}

/* toast card */

.toast{
min-width:260px;
max-width:320px;
padding:14px 16px;
border-radius:8px;
color:white;
font-size:14px;

display:flex;
flex-direction:column;

opacity:0;
transform:translateY(-10px);

transition:all .3s ease;

box-shadow:0 6px 18px rgba(0,0,0,.15);

pointer-events:auto;
}

/* visible */

.toast.show{
opacity:1;
transform:translateY(0);
}

/* body */

.toast-body{
display:flex;
align-items:center;
gap:10px;
}

/* icon */

.toast-icon{
font-size:16px;
font-weight:bold;
}

/* progress bar */

.toast-progress{
height:3px;
background:rgba(255,255,255,.6);
margin-top:10px;
width:100%;
transition:width .1s linear;
}

/* types */

.toast-success{
background:#16a34a;
}

.toast-error{
background:#dc2626;
}

.toast-warning{
background:#f59e0b;
}

.toast-info{
background:#2563eb;
}



/* ===============================
DASHBOARD STATS CARDS
=============================== */

.stat-card{
text-align:center;
padding:24px;
}

.stat-title{
font-size:14px;
color:#6b7280;
margin-bottom:10px;
}

.stat-number{
font-size:28px;
font-weight:700;
color:#111827;
}


/* =================================
ROLE MANAGEMENT UI
================================= */

.role-card h3{
margin-bottom:15px;
font-size:18px;
}

/* permission grid */

.permission-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:8px;
margin-bottom:15px;
}

/* permission item */

.permission-item{
display:flex;
align-items:center;
gap:8px;
background:#f9fafb;
padding:6px 10px;
border-radius:6px;
font-size:14px;
cursor:pointer;
}

.permission-item:hover{
background:#f3f4f6;
}

/* role action area */

.role-actions{
margin-top:10px;
}

/* ======================================
EVENT ACTION BUTTONS
====================================== */

.event-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
}

.event-actions .btn{
    white-space:nowrap;
}


/* =========================================================
   GLOBAL MODAL COMPONENT (FINAL)
========================================================= */

/* OVERLAY */

.modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2000;

    opacity: 0;
    visibility: hidden;

    transition: opacity .25s ease;
}

.modal.show{
    opacity: 1;
    visibility: visible;
}



/* MODAL CARD */

.modal-content{
    
    max-width: 600px;
    width: 95%;

    background: #ffffff;
    border-radius: 10px;

    padding: 0;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    transform: translateY(20px);
    transition: transform .25s ease, opacity .25s ease;

    /* SCROLL SYSTEM */
    max-height: 90vh;
    overflow-y: auto;
}

.modal.show .modal-content{
    transform: translateY(0);
}


/* SCROLLBAR (ORANGE THEME) */

.modal-content::-webkit-scrollbar{
    width:6px;
}

.modal-content::-webkit-scrollbar-thumb{
    background:#f97316;
    border-radius:6px;
}

.modal-content::-webkit-scrollbar-track{
    background:#fff7ed;
}

.modal-content{
    scrollbar-width: thin;
    scrollbar-color: #f97316 #fff7ed;
}


/* MODAL HEADER */

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#08405e;
    color:#fff;

    padding:12px 16px;

    border-radius:10px 10px 0 0;
    border-bottom:1px solid #374151;

    position:sticky;
    top:0;
    z-index:10;
}

.modal-header h3{
    margin:0;
    font-size:16px;
}


/* CLOSE BUTTON */

.modal-close{
    background:none;
    border:none;
    color:#fff;
    font-size:20px;
    cursor:pointer;
}

.modal-close:hover{
    color:#f87171;
}


/* BODY */

.modal-body{
    padding:20px;
    padding-bottom:60px;
}


/* ACTIONS */

.modal-actions{
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
    gap:10px;

    position:sticky;
    bottom:0;

    background:#fff;
    padding-top:10px;
}


/* REMOVE OLD FLOAT CLOSE */

.modal-content > .modal-close{
    display:none;
}

.modal-lg{
    max-width:900px;
}

.modal-sm{
    max-width:400px;
}




/* =========================================================
   MODAL FORM STYLE
========================================================= */

.modal-content h2{
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 20px;
}


.modal-content label{
    display:block;
    margin-top:12px;
    font-weight:500;
}


.modal-content input,
.modal-content select{

    width:100%;
    padding:10px;

    margin-top:6px;

    border:1px solid #e5e7eb;
    border-radius:6px;

    font-size:14px;
}


.modal-content input:focus,
.modal-content select:focus{
    outline:none;
    border-color:#2563eb;
}



/* =================================
GLOBAL LOADER
================================= */

#global-loader{
position:fixed;
inset:0;
background:rgba(0,0,0,0.4);
display:flex;
align-items:center;
justify-content:center;
z-index:3000;
}

.loader-box{
background:white;
padding:30px;
border-radius:10px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.loader-spinner{
width:40px;
height:40px;
border:4px solid #e5e7eb;
border-top:4px solid #2563eb;
border-radius:50%;
animation:spin 1s linear infinite;
margin:auto;
margin-bottom:10px;
}

@keyframes spin{
to{
transform:rotate(360deg);
}
}

/* =================================
   SECURITY DASHBOARD IMPROVED
================================= */

.security-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:30px;
}

/* security cards */

.security-card{
padding:22px;
border-radius:12px;
color:white;
position:relative;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,0.15);
transition:transform .2s ease, box-shadow .2s ease;
}

.security-card::after{
content:'';
position:absolute;
top:-40px;
right:-40px;
width:120px;
height:120px;
background:rgba(255,255,255,0.15);
border-radius:50%;
}

.security-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 24px rgba(0,0,0,0.18);
}

.security-card h3{
font-size:14px;
font-weight:600;
opacity:.9;
margin-bottom:8px;
}

.security-card .number{
font-size:32px;
font-weight:700;
}

/* gradients */

.security-card.attacks{
background:linear-gradient(135deg,#ff4d4d,#ff1a1a);
}

.security-card.blocked{
background:linear-gradient(135deg,#ff9f1a,#ff6f00);
}

.security-card.latest{
background:linear-gradient(135deg,#3b82f6,#1e40af);
}

.security-card.top{
background:linear-gradient(135deg,#22c55e,#15803d);
}

.security-card.honeypot{
background:linear-gradient(135deg,#a855f7,#6b21a8);
}

/* attack types */

.attack-types{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:25px;
}

.type-card{
background:white;
padding:12px 18px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
font-size:14px;
display:flex;
gap:10px;
align-items:center;
}

/* security tables */

.security-table{
margin-top:10px;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.security-table th{
background:#1f2937;
color:white;
padding:12px;
font-size:14px;
}

.security-table td{
padding:12px;
font-size:13px;
border-bottom:1px solid #f1f5f9;
}

.security-table tr:hover{
background:#f9fafb;
}

/* =========================================================
   FOOTER
========================================================= */

footer {
    background: #ffffff;
    padding: 10px 20px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
}

.dev-message{
    font-size:12px;
    color:#999;
    display:block;
    margin-top:4px;
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

.menu-toggle {
    display: none;
    font-size: 22px;
    cursor: pointer;
}

@media (max-width: 768px) {

    .sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        height: 100%;
        z-index: 1000;
    }

    .sidebar.active {
        left: 0;
    }

    .menu-toggle {
        display: inline-block;
    }

    header {
        padding: 0 16px;
    }

}

/* =================================
SECURITY MONITOR GRAPH
================================= */

.attack-graph{
background:white;
padding:18px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
margin-bottom:25px;
}

.graph-row{
display:flex;
align-items:center;
margin:8px 0;
font-size:13px;
}

.graph-hour{
width:60px;
color:#64748b;
}

.graph-bar{
height:12px;
background:linear-gradient(90deg,#ef4444,#dc2626);
border-radius:6px;
margin:0 10px;
transition:width .3s ease;
}

.graph-count{
font-weight:600;
color:#374151;
}


/* =================================
SECURITY EVENT LOG STYLE
================================= */

.security-table code{
font-family:monospace;
font-size:12px;
background:#f3f4f6;
padding:3px 6px;
border-radius:4px;
color:#111827;
}


/* =================================
SECURITY ACTION BUTTON
================================= */

.security-table form{
margin:0;
}

.security-table .btn-danger{
font-size:11px;
padding:4px 10px;
border-radius:5px;
transition:background .2s ease;
}

.security-table .btn-danger:hover{
background:#b91c1c;
}


/* =================================
SECTION TITLE STYLE
================================= */

.section-title{
font-size:18px;
font-weight:600;
margin-top:25px;
margin-bottom:12px;
color:#111827;
}


/* =================================
ATTACK TYPE CARDS IMPROVED
================================= */

.type-card{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:10px 14px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
font-size:13px;
min-width:160px;
}

.type-card strong{
font-size:16px;
color:#ef4444;
}


/* =========================================================
   GLOBAL UTILITY CLASSES
========================================================= */

.d-flex{
    display:flex;
}

.flex-wrap{
    flex-wrap:wrap;
}

.align-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.gap-5{
    gap:5px;
}

.gap-10{
    gap:10px;
}

.mt-20{
    margin-top:20px;
}

.mb-10{
    margin-bottom:10px;
}

.mb-20{
    margin-bottom:20px;
}

.text-muted{
    color:#6b7280;
}

.small{
    font-size:12px;
}

.page-title{
    margin:0 0 20px;
    font-size:24px;
    font-weight:700;
    color:#111827;
}

.table-responsive{
    overflow-x:auto;
}

.inline-form{
    display:inline-block;
    margin:0;
}

.row-deleted{
    opacity:.65;
}

.empty-state{
    background:#ffffff;
    border:1px dashed #d1d5db;
    border-radius:10px;
    padding:24px;
    text-align:center;
    color:#6b7280;
}

/* =========================================================
   NOTICE / FILTER LAYOUT
========================================================= */

.filter-form{
    margin-bottom:0;
}

.filter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    align-items:end;
}

.form-control{
    width:100%;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:6px;
    font-size:14px;
    background:#ffffff;
}

.form-control:focus{
    outline:none;
    border-color:#2563eb;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:16px;
}

.stat-label{
    font-size:13px;
    color:#6b7280;
    margin-bottom:8px;
}

.pagination-wrap{
    display:flex;
    justify-content:flex-end;
}

/* =========================================================
   EXTRA BUTTON STYLES
========================================================= */

.btn-light{
    background:#ffffff;
    color:#374151;
    border:1px solid #d1d5db;
}

.btn-light:hover{
    background:#f9fafb;
}

.btn-info{
    background:#0ea5e9;
    color:#ffffff;
}

.btn-outline-danger{
    background:#ffffff;
    color:#dc2626;
    border:1px solid #fecaca;
}

.btn-outline-danger:hover{
    background:#fef2f2;
}

/* =========================================================
   STATUS BADGES
========================================================= */

.badge-light{
    background:#f3f4f6;
    color:#374151;
}

.badge-draft{
    background:#e5e7eb;
    color:#374151;
}

.badge-pending{
    background:#fef3c7;
    color:#92400e;
}

.badge-approved,
.badge-published,
.badge-success{
    background:#dcfce7;
    color:#166534;
}

.badge-rejected,
.badge-danger{
    background:#fee2e2;
    color:#991b1b;
}

.badge-unpublished,
.badge-warning{
    background:#e0e7ff;
    color:#3730a3;
}

/* =========================================================
   NOTICE FORM
========================================================= */

.notice-form .form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.notice-form .full-width{
    grid-column:1 / -1;
}

.notice-form textarea.form-control{
    resize:vertical;
    min-height:100px;
}

.checkbox-group{
    display:flex;
    align-items:center;
}

.checkbox-group label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
}

.text-danger{
    color:#dc2626;
}

/* =========================================================
   MOBILE TABLE / FORM
========================================================= */

@media (max-width: 768px){

    .notice-form .form-grid{
        grid-template-columns:1fr;
    }

    .pagination-wrap{
        justify-content:flex-start;
    }

    .table th,
    .table td{
        padding:10px;
        font-size:13px;
    }

    .btn{
        padding:6px 10px;
    }
}

/* =========================================================
   TOUCH DEVICE OPTIMIZATION
========================================================= */

@media (hover: none) {
    .card:hover {
        transform: none;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
}

/* =========================================================
   Media Picker Thumbs
========================================================= */
.media-thumb {
    width: 120px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.2s;
}

.media-thumb:hover {
    border-color: #007bff;
}

.media-thumb.active {
    border-color: #28a745; /* green */
}

/* =========================================================
   NOTICES MODULE FINAL
========================================================= */

.notice-table-wrap{
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

.notice-table{
    width:100%;
    margin:0;
    border-collapse:collapse;
    box-shadow:none;
    border-radius:0;
    background:#fff;
}

.notice-table thead th{
    background:#f8fafc;
    color:#475569;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:13px 12px;
    border-bottom:1px solid #e5e7eb;
    white-space:nowrap;
}

.notice-table td{
    padding:14px 12px;
    border-bottom:1px solid #f1f5f9;
    vertical-align:top;
}

.notice-table tbody tr:hover{
    background:#f8fbff;
}

.notice-table thead th:last-child,
.notice-table td:last-child{
    width:220px;
}

.notice-id{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:30px;
    padding:0 10px;
    border-radius:999px;
    background:#eef2f7;
    color:#111827;
    font-size:12px;
    font-weight:700;
}

.notice-title-cell{
    min-width:300px;
    max-width:420px;
}

.notice-title{
    font-size:14px;
    font-weight:700;
    color:#111827;
    line-height:1.45;
    margin-bottom:4px;
}

.notice-slug{
    font-size:12px;
    color:#2563eb;
    margin-bottom:4px;
    word-break:break-all;
}

.notice-summary{
    font-size:12px;
    color:#6b7280;
    line-height:1.45;
    max-width:420px;
}

.notice-meta-stack{
    min-width:210px;
}

.notice-meta-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}

.notice-meta-info{
    font-size:12px;
    line-height:1.5;
    color:#475569;
}

.notice-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:flex-start;
}

.notice-actions .inline-form{
    display:inline-flex;
    margin:0;
}

.notice-actions .btn,
.notice-actions button{
    min-width:auto;
    white-space:nowrap;
    padding:5px 10px;
    font-size:12px;
    line-height:1.2;
    text-align:center;
}

.badge-muted{
    background:#f3f4f6;
    color:#6b7280;
}

.badge-success-soft{
    background:#dcfce7;
    color:#166534;
}

.stats-grid .stat-card{
    text-align:left;
    padding:20px;
    border:1px solid #e5e7eb;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.filter-form{
    margin-bottom:0;
}

.filter-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;
    gap:12px;
    align-items:end;
}

.filter-form .form-control{
    min-height:40px;
}

.pagination-wrap{
    margin-top:18px;
    padding-top:8px;
    border-top:1px solid #eef2f7;
}

/* action button colors */

.notice-actions .btn-outline-danger,
.notice-actions button.btn-outline-danger{
    background:#dc2626;
    color:#ffffff;
    border:1px solid #dc2626;
    box-shadow:0 4px 10px rgba(220,38,38,0.18);
}

.notice-actions .btn-outline-danger:hover,
.notice-actions button.btn-outline-danger:hover{
    background:#b91c1c;
    border-color:#b91c1c;
    color:#ffffff;
    box-shadow:0 6px 14px rgba(185,28,28,0.24);
}

.notice-actions .btn-outline-danger:focus,
.notice-actions button.btn-outline-danger:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(220,38,38,0.18);
}

.notice-actions .btn-light,
.notice-actions a.btn-light{
    background:linear-gradient(135deg,#fde68a,#facc15);
    color:#111827;
    border:1px solid #facc15;
    box-shadow:0 6px 14px rgba(250,204,21,0.22);
    font-weight:600;
}

.notice-actions .btn-light:hover,
.notice-actions a.btn-light:hover{
    background:#eab308;
    border-color:#ca8a04;
    color:#111827;
    box-shadow:0 6px 14px rgba(234,179,8,0.26);
}

.notice-actions .btn-primary{
    box-shadow:0 4px 10px rgba(37,99,235,0.16);
}

.notice-actions .btn-secondary{
    box-shadow:0 4px 10px rgba(100,116,139,0.14);
}

.notice-actions .btn-success{
    box-shadow:0 4px 10px rgba(22,163,74,0.16);
}

.notice-actions .btn-warning{
    box-shadow:0 4px 10px rgba(245,158,11,0.16);
}

.notice-actions .btn-danger{
    box-shadow:0 4px 10px rgba(220,38,38,0.16);
}

@media (max-width:1200px){
    .filter-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:768px){
    .filter-grid{
        grid-template-columns:1fr;
    }

    .notice-table{
        min-width:900px;
    }

    .stats-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .stats-grid .stat-card{
        padding:16px;
    }

    .notice-title-cell{
        min-width:260px;
    }

    .notice-meta-stack{
        min-width:190px;
    }
}

/* =========================================================
   Additional Dashboard Styles
========================================================= */
/* ===============================
   MENU SECTION TITLE
=============================== */

.menu-section-title{
    font-size:11px;
    text-transform:uppercase;
    color:#9ca3af;
    padding:10px 16px 5px;
    display:block;
}

/* ===============================
   MENU BADGE
=============================== */

.menu-badge{
    margin-left:auto;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    padding:2px 8px;
    border-radius:10px;
}

/* ===============================
   COLLAPSIBLE MENU (NEW)
=============================== */

.menu-group-header{
    padding:12px 16px;
    font-size:13px;
    color:#9ca3af;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    user-select:none;
}

.menu-group-header:hover{
    background:#374151;
    color:#fff;
}

/* arrow animation */
.menu-group .arrow{
    transition:transform 0.3s ease;
}

.menu-group.open .arrow{
    transform:rotate(90deg);
}

/* collapse animation */
.menu-sub{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
}

/* open state */
.menu-group.open .menu-sub{
    max-height:500px;
}

/* indent submenu */
.menu-sub a{
    padding-left:30px;
}
/* ===============================
   GROUP HEADER ICON
=============================== */

.group-left{
    display:flex;
    align-items:center;
    gap:10px;
}

/* match existing sidebar icon style */
.menu-group-header .icon{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#facc15;
}
.menu-group-header{
    font-weight:700;   /* or 700 for stronger */
    letter-spacing:0.3px;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    gap:20px;
    flex-wrap:wrap;
}

.page-header h1{
    margin:0;
    font-size:28px;
}

.page-header p{
    margin:6px 0 0;
    color:#666;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:24px;
}

.stat-card{
    background:#fff;
    border-radius:14px;
    padding:24px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.stat-card h3{
    margin:0;
    font-size:32px;
}

.stat-card p{
    margin-top:8px;
    color:#666;
}

.card{
    background:#fff;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    overflow:hidden;
}

.card-header{
    padding:20px;
    border-bottom:1px solid #eee;
}

.table-responsive{
    overflow:auto;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
}

.admin-table th,
.admin-table td{
    padding:14px 16px;
    border-bottom:1px solid #f0f0f0;
    text-align:left;
}

.admin-table th{
    background:#fafafa;
    font-weight:600;
}

.badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.badge.success{
    background:#dcfce7;
    color:#166534;
}

.badge.warning{
    background:#fef3c7;
    color:#92400e;
}

.action-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-sm{
    display:inline-block;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}

.btn-primary{
    background:#2563eb;
    color:#fff;
}

.btn-sm{
    background:#f3f4f6;
    color:#111;
}

.btn-sm.primary{
    background:#2563eb;
    color:#fff;
}

.btn-sm.danger{
    background:#dc2626;
    color:#fff;
}
/* =================================
DEPARTMENT SECTION PAGE
================================= */

.btn-header-action{

    padding:8px 14px;

    font-size:13px;

    font-weight:600;

    border-radius:8px;

    display:inline-flex;

    align-items:center;

    gap:6px;

    white-space:nowrap;

    width:auto;

    height:auto;

    line-height:1.2;

    box-shadow:
    0 2px 6px rgba(37,99,235,.15);

    transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.btn-header-action:hover{

    transform:translateY(-1px);

    box-shadow:
    0 6px 14px rgba(37,99,235,.22);
}

.action-buttons{

    display:flex;

    gap:8px;

    align-items:center;

    flex-wrap:wrap;
}