/* ==========================================
   CTRMS - Global Styles
   Saint Ferdinand College Theme
========================================== */

:root{

    --maroon:#7B1113;
    --maroon-dark:#5C0D0F;

    --gold:#D4AF37;
    --gold-dark:#B8941F;

    --white:#FFFFFF;
    --light:#F5F6FA;
    --gray:#6C757D;
    --dark:#343A40;

    --border:#DEE2E6;

    --radius:15px;

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

    --transition:.3s;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--dark);

}

/* ==========================================
   LINKS
========================================== */

a{

    text-decoration:none;
    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}

/* ==========================================
   LOGIN PAGE
========================================== */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:
    linear-gradient(135deg,#7B1113,#4D090B);

}

/* ==========================================
   LOGIN CARD
========================================== */

.login-card{

    width:100%;
    max-width:430px;

    background:#fff;

    border-radius:20px;

    padding:45px;

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

/* ==========================================
   LOGO
========================================== */

.login-logo{

    width:120px;
    height:120px;

    object-fit:contain;

}

/* ==========================================
   TEXT
========================================== */

.text-maroon{

    color:var(--maroon)!important;

}

.bg-maroon{

    background-color:var(--maroon)!important;

}

.text-gold{

    color:var(--gold)!important;

}

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

.form-label{

    font-weight:500;

    margin-bottom:6px;

}

.form-control{

    height:50px;

    border-radius:10px;

    border:1px solid var(--border);

}

.form-control:focus{

    border-color:var(--maroon);

    box-shadow:0 0 0 .2rem rgba(123,17,19,.15);

}

/* ==========================================
   INPUT GROUP
========================================== */

.input-group .btn{

    border-radius:0 10px 10px 0;

}

/* ==========================================
   BUTTONS
========================================== */

.btn-maroon{

    background:var(--maroon);

    color:#fff;

    border:none;

    height:50px;

    font-weight:600;

    border-radius:10px;

    transition:.3s;

}

.btn-maroon:hover{

    background:var(--maroon-dark);

    color:#fff;

}

.btn-gold{

    background:var(--gold);

    color:#fff;

    border:none;

}

.btn-gold:hover{

    background:var(--gold-dark);

    color:#fff;

}

/* ==========================================
   CHECKBOX
========================================== */

.form-check-input:checked{

    background:var(--maroon);

    border-color:var(--maroon);

}

/* ==========================================
   CARD
========================================== */

.card{

    border:none;

    border-radius:15px;

    box-shadow:var(--shadow);

}

/* ==========================================
   EQUIPMENT MODAL
========================================== */

#equipmentModal .modal-dialog{

    margin:1rem auto;

    height:calc(100% - 2rem);

    display:flex;

    flex-direction:column;

}

#equipmentModal .modal-content{

    height:100%;

    max-height:none;

    overflow:hidden;

}

#equipmentModal #equipmentForm{

    display:flex;

    flex:1 1 auto;

    flex-direction:column;

    min-height:0;

}

#equipmentModal .modal-body{

    flex:1 1 auto;

    min-height:0;

    overflow-y:scroll;

}

#equipmentModal .modal-header,
#equipmentModal .modal-footer{

    flex:0 0 auto;

}

/* ==========================================
   SCROLLABLE FORM MODALS
========================================== */

.modal-dialog-scrollable{

    height:calc(100% - 2rem);

    margin:1rem auto;

}

.modal-dialog-scrollable .modal-content{

    display:flex;

    flex-direction:column;

    height:100%;

    max-height:none;

    overflow:hidden;

}

.modal-dialog-scrollable form{

    display:flex;

    flex:1 1 auto;

    height:100%;

    flex-direction:column;

    min-height:0;

}

.modal-dialog-scrollable .modal-body{

    flex:1 1 auto;

    height:calc(100vh - 210px);

    max-height:calc(100vh - 210px);

    min-height:0;

    overflow-y:scroll!important;

}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer{

    flex:0 0 auto;

}

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

.table{

    background:#fff;

}

/* ==========================================
   NAVBAR
========================================== */

.navbar{

    background:var(--maroon);
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:1040;
    min-height:66px;

}

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

.sidebar{

    background:var(--maroon);

    color:#fff;

}

.sidebar a{

    color:#fff;

}

.sidebar a:hover{

    background:rgba(255,255,255,.10);

}

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

.stat-card{

    background:#fff;

    border-radius:15px;

    box-shadow:var(--shadow);

    padding:20px;

}

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

.badge-maroon{

    background:var(--maroon);

}

.badge-gold{

    background:var(--gold);

}

/* ==========================================
   ALERTS
========================================== */

.alert-maroon{

    background:#F8D7DA;

    color:#842029;

}

/* Notifications */
.notifications-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 30px;border-radius:18px;color:#fff;background:linear-gradient(120deg,var(--maroon),#9b292c);box-shadow:0 14px 28px rgba(123,17,19,.2)}
.notifications-hero h3{font-size:1.75rem;font-weight:700;margin:6px 0}.notifications-hero p{margin:0;color:rgba(255,255,255,.78)}.notifications-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#f6d99a}.notifications-eyebrow i{margin-right:6px}.btn-outline-maroon{background:#fff;color:var(--maroon);border:1px solid #fff;font-weight:600;border-radius:10px;padding:.7rem 1rem}.btn-outline-maroon:hover{background:#f9e7e7;color:var(--maroon);border-color:#f9e7e7}.notification-filter-card{background:#fff;border-radius:15px;box-shadow:var(--shadow);padding:18px 20px;display:flex;align-items:end;justify-content:space-between;gap:20px}.filter-title{font-weight:700;color:#342d2e;display:flex;align-items:center;gap:9px}.filter-title i{color:var(--maroon)}.notification-filters{display:flex;gap:12px;flex-wrap:wrap}.notification-filters>div{min-width:190px}.notification-filters label{display:block;font-size:.78rem;font-weight:600;color:#6c757d;margin:0 0 5px}.notification-filters .form-select{height:42px;border-radius:9px}.notification-stream{display:grid;gap:12px}.notification-card{position:relative;display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid #edf0f2;border-radius:14px;padding:17px 20px;color:var(--dark);box-shadow:0 4px 13px rgba(30,30,30,.04)}.notification-card:hover{border-color:#d9b1b2;transform:translateY(-1px);box-shadow:0 9px 20px rgba(123,17,19,.09);color:var(--dark)}.notification-card.is-unread{border-left:4px solid var(--maroon);background:#fffafb}.notification-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:11px}.notification-icon.ticket{color:var(--maroon);background:#f9e8e8}.notification-icon.system{color:#2463a4;background:#e9f2ff}.notification-content{min-width:0;flex:1}.notification-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.notification-top strong{font-size:.96rem}.notification-top time{font-size:.76rem;color:#90979d;white-space:nowrap}.notification-content p{color:#626b73;font-size:.88rem;margin:5px 0 10px}.notification-tags{display:flex;flex-wrap:wrap;gap:7px}.notification-tag{font-size:.73rem;font-weight:600;border-radius:999px;padding:4px 8px}.notification-tag i{font-size:.68rem;margin-right:4px}.notification-tag.department{background:#f0f1f3;color:#505861}.notification-tag.status{background:#e8efff;color:#315aab}.notification-tag.status i{font-size:.55rem}.notification-tag.is-pending{background:#fff4d7;color:#936900}.notification-tag.is-accepted{background:#e2f1ff;color:#196da5}.notification-tag.is-closed,.notification-tag.is-resolved{background:#e7f6ec;color:#237443}.notification-tag.is-rejected,.notification-tag.is-cancelled{background:#fae4e4;color:#a23c3c}.notification-dot{width:8px;height:8px;border-radius:50%;background:var(--maroon);margin-top:6px}.notification-empty{text-align:center;background:#fff;border-radius:15px;padding:55px 20px;color:#78818a;box-shadow:var(--shadow)}.notification-empty i{font-size:2rem;color:#c9cccf}.notification-empty h5{color:#424a52;margin:13px 0 4px}.notification-empty p{margin:0;font-size:.88rem}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

::-webkit-scrollbar-thumb{

    background:var(--maroon);

}

::-webkit-scrollbar-thumb:hover{

    background:var(--maroon-dark);

}

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

@media(max-width:768px){

.notifications-hero{padding:22px;align-items:flex-start;flex-direction:column}.notifications-hero h3{font-size:1.45rem}.notification-filter-card{align-items:stretch;flex-direction:column}.notification-filters{display:grid;grid-template-columns:1fr}.notification-filters>div{min-width:0}.notification-card{padding:14px;gap:11px}.notification-top{align-items:flex-start;flex-direction:column;gap:2px}.notification-top time{font-size:.7rem}.notification-dot{display:none}

.navbar{

    min-height:58px;

}

.navbar .container-fluid{

    padding:0 10px;

}

.navbar-brand{

    font-size:1.1rem;

}

#sidebarToggle{

    margin-right:.4rem!important;
    padding:.35rem .45rem;

}

.navbar .ms-auto{

    gap:.15rem;

}

.navbar .btn{

    padding:.35rem .45rem;

}

.navbar .dropdown > a,
.navbar .dropdown > button{

    display:flex;
    align-items:center;
    max-width:135px;
    overflow:hidden;
    font-size:.78rem;
    white-space:nowrap;
    text-overflow:ellipsis;

}

.navbar .dropdown img{

    width:30px!important;
    height:30px!important;
    margin-right:.35rem!important;

}

.card-body{

    padding:14px;

}

.table-responsive,
.dataTables_wrapper{

    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

}

.table-responsive .table,
.dataTables_wrapper table{

    min-width:680px;

}

.dt-layout-row{

    row-gap:.75rem;

}

.dt-layout-cell{

    width:100%;

}

.modal-dialog{

    margin:.5rem;

}

.modal-dialog-scrollable{

    height:calc(100dvh - 1rem);
    margin:.5rem;

}

.modal-dialog-scrollable .modal-body{

    height:auto;
    max-height:calc(100dvh - 175px);

}

.login-card{

    padding:30px;

}

.login-logo{

    width:90px;

    height:90px;

}

}

@media(max-width:576px){

.login-card{

    padding:25px;

}

}

/* CTRMS notification cards — maroon / gold only */
.notification-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;background:transparent!important;border:0!important}.ctrms-notification-card{position:relative;display:flex;gap:13px;min-height:145px;padding:18px;background:#fff;color:var(--dark);border:1px solid #efe2e2;border-radius:15px;box-shadow:0 7px 18px rgba(47,18,19,.07)}.ctrms-notification-card:hover{color:var(--dark);transform:translateY(-2px);border-color:#c99b9b;box-shadow:0 11px 24px rgba(123,17,19,.13)}.ctrms-notification-card.unread{border-top:4px solid var(--maroon);padding-top:15px}.ctrms-notification-mark{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;background:#f7e7e7;color:var(--maroon);border-radius:11px}.ctrms-notification-body{min-width:0;flex:1}.ctrms-notification-heading{display:flex;flex-direction:column;gap:2px;margin-bottom:7px}.ctrms-notification-heading strong{font-size:.92rem;line-height:1.3;color:#541012}.ctrms-notification-heading small{font-size:.72rem;color:#8b8f94}.ctrms-notification-body p{margin:0 0 12px;font-size:.84rem;color:#60666d;line-height:1.5}.ctrms-notification-tags{display:flex;flex-wrap:wrap;gap:6px}.ctrms-notification-tag{font-size:.69rem;font-weight:600;border-radius:999px;padding:4px 8px}.ctrms-notification-tag i{font-size:.65rem;margin-right:4px}.ctrms-notification-tag.department{background:#f8f0df;color:#80601c}.ctrms-notification-tag.status{background:#f4e7e7;color:#7b1113}.ctrms-notification-tag.status.closed,.ctrms-notification-tag.status.resolved{background:#e5f1e8;color:#346b43}.ctrms-notification-tag.status.pending{background:#f8efda;color:#8b6411}
@media(max-width:576px){.notification-card-grid{grid-template-columns:1fr}.ctrms-notification-card{min-height:0}}

/* Keep request-ticket table controls compact and aligned. */
.tickets-page .dt-layout-row:first-child{display:flex!important;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.tickets-page .dt-layout-row:first-child .dt-layout-cell{width:auto}.tickets-page .dt-search{display:flex;align-items:center;gap:8px}.tickets-page .dt-search input{width:220px;margin-left:0!important}.tickets-page .dt-length{display:flex;align-items:center;gap:8px}.tickets-page .dt-length select{width:auto}.tickets-page .dt-layout-row:last-child{margin-top:16px}
@media(max-width:768px){.tickets-page .dt-layout-row:first-child{align-items:stretch;flex-direction:column}.tickets-page .dt-search input{width:100%}.tickets-page .dt-search,.tickets-page .dt-length{width:100%;justify-content:space-between}}

/* Compact notification toolbar */
.notification-toolbar{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border-radius:14px;box-shadow:var(--shadow)}
.toolbar-control,.toolbar-search{height:42px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #e3e6e9;border-radius:9px;background:#fff}
.toolbar-control{min-width:190px}.toolbar-search{flex:1;min-width:220px}.toolbar-control i,.toolbar-search i{font-size:.85rem;color:var(--maroon)}
.toolbar-control .form-select,.toolbar-search .form-control{height:38px;border:0;padding:0;box-shadow:none;background:transparent;font-size:.86rem}.toolbar-search .form-control:focus{box-shadow:none}
@media(max-width:768px){.notification-toolbar{align-items:stretch;flex-direction:column}.toolbar-control,.toolbar-search{width:100%;min-width:0}}

/* Notification links must retain the CTRMS card appearance, not browser link blue. */
.notification-card,.notification-card:hover,.notification-card:focus{color:var(--dark);text-decoration:none}