/* ==========================================================
   DB POWER OHC DESIGN SYSTEM
   Medicine Inventory System
   Version 2.0
========================================================== */

:root{

    --db-orange:#F58220;
    --db-orange-dark:#E36E00;
    --db-navy:#0B2C5F;
    --db-navy-light:#184A8C;

    --success:#16a34a;
    --danger:#dc2626;
    --warning:#f59e0b;
    --info:#0ea5e9;

    --bg:#f4f7fb;
    --surface:#ffffff;

    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;

    --radius:18px;
    --shadow:0 12px 30px rgba(11,44,95,.08);

}

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

html,
body{

    margin:0;
    padding:0;
    min-height:100%;

    font-family:'Segoe UI',Tahoma,sans-serif;

    background:var(--bg);
    color:var(--text);

}

.app-wrapper{

    min-height:100vh;

}

a{

    text-decoration:none;

}

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

.login-page{

    background:
    radial-gradient(circle at top right,
    rgba(245,130,32,.18),
    transparent 35%),
    linear-gradient(135deg,#071C39,#123B73,#F58220);

}

.login-brand-section{

    background:transparent;

}

.login-card{

    max-width:460px;

    padding:40px;

    border-radius:28px;

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

    backdrop-filter:blur(12px);

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.login-icon{

    width:82px;
    height:82px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,var(--db-orange),var(--db-orange-dark));

    color:white;

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

    font-size:34px;

    box-shadow:0 10px 25px rgba(245,130,32,.35);

}

/* ==========================================================
   FORMS
========================================================== */

.form-control,
.form-select{

    min-height:48px;

    border-radius:12px;

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

    transition:.2s;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--db-orange);

    box-shadow:0 0 0 .2rem rgba(245,130,32,.18);

}

.input-group-text{

    min-width:48px;

    justify-content:center;

    background:white;

}

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

.btn{

    border-radius:12px;

    transition:.2s;

    font-weight:500;

}

.btn-primary{

    background:linear-gradient(90deg,var(--db-orange),var(--db-orange-dark));

    border:none;

}

.btn-primary:hover{

    background:linear-gradient(90deg,var(--db-orange-dark),#c85e00);

    transform:translateY(-1px);

}

.btn-outline-primary{

    border-color:var(--db-orange);

    color:var(--db-orange);

}

.btn-outline-primary:hover{

    background:var(--db-orange);

    color:white;

}

.btn-navy{

    background:linear-gradient(90deg,var(--db-navy),var(--db-navy-light));

    color:white;

    border:none;

}

.btn-navy:hover{

    color:white;

    transform:translateY(-1px);

}

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

.app-sidebar{

    position:fixed;

    top:0;
    left:0;

    width:260px;
    height:100vh;

    background:linear-gradient(180deg,#071C39,#0B2C5F);

    color:white;

    overflow-y:auto;

    z-index:1050;

    transition:transform .3s ease;

}

.sidebar-header{

    padding:26px 18px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.08);

}

/* Whole-sidebar collapse to an icon-only rail. Desktop only (>=992px) -
   the mobile show/hide overlay below already has its own behavior and
   this is not meant to interact with it. Toggled via #sidebarCollapseToggle
   in includes/sidebar.php + assets/js/main.js, persisted in localStorage. */
@media (min-width:992px){

    body.sidebar-collapsed .app-sidebar{
        width:76px;
    }

    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .app-footer{
        margin-left:76px;
    }

    /* !important needed here: menu-title-toggle and menu-item both carry
       Bootstrap's .d-flex utility class, which sets display:flex
       !important - a plain display:none here would lose to it. */
    body.sidebar-collapsed .app-sidebar .sidebar-brand-text,
    body.sidebar-collapsed .app-sidebar .menu-title-toggle,
    body.sidebar-collapsed .app-sidebar .menu-item span{
        display:none !important;
    }

    /* !important needed: the header carries Bootstrap's
       .justify-content-between (also !important), which would otherwise
       leave the collapse-toggle button half outside the narrowed rail. */
    body.sidebar-collapsed .app-sidebar .sidebar-header{
        justify-content:center !important;
        flex-direction:column;
        gap:8px;
    }

    body.sidebar-collapsed .app-sidebar .sidebar-header > div{
        margin:0 !important;
    }

    body.sidebar-collapsed .app-sidebar .menu-item{
        justify-content:center;
        margin-left:8px;
        margin-right:8px;
    }

    body.sidebar-collapsed .app-sidebar .menu-item i{
        margin-right:0 !important;
    }
}

.sidebar-logo-card{

    width:170px;

    margin:auto;

    padding:10px;

    border-radius:16px;

    background:white;

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

}

.sidebar-logo{

    width:100%;

    display:block;

}

.sidebar-brand-subtitle{

    display:block;

    margin-top:12px;

    color:#dbe7ff;

    font-size:13px;

    letter-spacing:.4px;

}

.sidebar-menu{

    padding:18px 12px;

}

.menu-section{

    margin-bottom:24px;

}

.menu-title{

    display:block;

    padding:0 12px 8px;

    color:#93a8c8;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

}

.menu-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    margin:4px 0;

    color:#dbe7ff;

    border-radius:14px;

    transition:.25s;

}

.menu-item:hover,
.menu-item.active{

    background:linear-gradient(90deg,var(--db-orange),var(--db-orange-dark));

    color:white;

    transform:translateX(5px);

}

.menu-icon{

    width:24px;

    text-align:center;

    font-size:17px;

}

.logout-item:hover{

    background:linear-gradient(90deg,#dc2626,#b91c1c);

}

.sidebar-footer{

    padding:18px;

}

.sidebar-footer-card{

    border-radius:16px;

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

    padding:14px;

    text-align:center;

    border:1px solid rgba(255,255,255,.06);

}

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

.navbar{

    border-radius:0 0 18px 18px;

}

.navbar-brand{

    color:var(--db-navy);

}

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

.main-content{

    margin-left:260px;

    min-height:calc(100vh - 70px);

    padding:30px;

}

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

.app-footer{

    margin-left:260px;

    min-height:60px;

    padding:16px 28px;

    background:white;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--muted);

    font-size:13px;

}

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

.page-card,
.dashboard-card{

    background:white;

    border:none;

    border-radius:22px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.dashboard-card{

    transition:.25s;

}

.dashboard-card:hover{

    transform:translateY(-5px);

}

.page-card-header{

    background:linear-gradient(90deg,var(--db-navy),var(--db-navy-light));

    color:white;

    padding:18px 22px;

}

.dashboard-icon{

    width:58px;
    height:58px;

    border-radius:16px;

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

    font-size:24px;

    color:white;

}

.bg-orange{

    background:linear-gradient(135deg,var(--db-orange),var(--db-orange-dark));

}

.bg-blue{

    background:linear-gradient(135deg,var(--db-navy),var(--db-navy-light));

}

.bg-green{

    background:linear-gradient(135deg,#16a34a,#15803d);

}

.bg-red{

    background:linear-gradient(135deg,#dc2626,#991b1b);

}

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

.table{

    border-radius:14px;

    overflow:hidden;

}

.table thead{

    background:#f8fafc;

}

.table th{

    color:var(--db-navy);

    font-weight:600;

    border-bottom:2px solid #edf2f7;

}

.table-hover tbody tr:hover{

    background:#fff8ef;

}

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

.badge{

    border-radius:30px;

    padding:.5rem .8rem;

    font-weight:600;

}

/* ==========================================================
   INFO BOXES
========================================================== */

.info-box{

    background:#f9fbff;

    border:1px solid #edf2f7;

    border-radius:14px;

    padding:16px;

}

.info-label{

    color:#64748b;

    font-size:.78rem;

    font-weight:600;

    margin-bottom:6px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.info-value{

    color:#0f172a;

    font-weight:700;

    font-size:1rem;

}

/* ==========================================================
   STATUS PILLS
========================================================== */

.status-issued{

    background:#dcfce7;

    color:#166534;

    padding:6px 14px;

    border-radius:20px;

    font-weight:600;

}

.status-cancelled{

    background:#fee2e2;

    color:#991b1b;

    padding:6px 14px;

    border-radius:20px;

    font-weight:600;

}

/* ==========================================================
   SIGNATURE BOXES
========================================================== */

.sign-box{

    height:90px;

    border-top:2px solid #94a3b8;

    margin-top:50px;

    text-align:center;

    padding-top:10px;

    color:#475569;

    font-weight:600;

}

/* ==========================================================
   DATATABLES
========================================================== */

.dataTables_wrapper .dataTables_filter input{

    border-radius:10px;

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

    padding:6px 10px;

}

.dataTables_wrapper .dataTables_length select{

    border-radius:8px;

}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{

    background:var(--db-orange)!important;

    color:white!important;

    border:none!important;

    border-radius:8px;

}

/* ==========================================================
   SELECT2
========================================================== */

.select2-container--default .select2-selection--single{

    height:48px;

    border-radius:12px;

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

}

.select2-container--default .select2-selection--single .select2-selection__rendered{

    line-height:46px;

}

.select2-container--default .select2-selection--single .select2-selection__arrow{

    height:46px;

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#b7c5d8;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8aa2c2;

}

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

@media (max-width:991.98px){

    .app-sidebar{

        transform:translateX(-100%);

    }

    .app-sidebar.show{

        transform:translateX(0);

    }

    .main-content{

        margin-left:0;

        padding:20px;

    }

    .app-footer{

        margin-left:0;

        flex-direction:column;

        gap:6px;

        text-align:center;

    }

    .login-card{

        padding:28px 24px;

    }

}

/* ==========================================
   OHC Medicine Issue Module
========================================== */

.ohc-header{
background:linear-gradient(135deg,#ff7b00,#0a2b5c);
padding:28px;
border-radius:22px;
box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.ohc-logo{
background:#fff;
padding:10px;
border-radius:16px;
}

.opd-card{
background:#fff;
border:none;
border-radius:20px;
box-shadow:0 8px 25px rgba(15,23,42,.08);
margin-bottom:18px;
}

.opd-card .card-header{
background:none;
border-bottom:1px solid #eef2f7;
padding:18px 22px;
font-weight:700;
font-size:17px;
}

.opd-card .card-body{
padding:22px;
}

.form-label{
font-weight:600;
font-size:.88rem;
color:#475569;
margin-bottom:6px;
}

.form-control,
.form-select{
height:44px;
border-radius:12px;
border:1px solid #d6dde8;
}

textarea.form-control{
height:auto;
min-height:95px;
}

.vital-card{
border-radius:18px;
padding:18px;
color:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.vital-temp{background:linear-gradient(135deg,#ef4444,#dc2626);}
.vital-bp{background:linear-gradient(135deg,#2563eb,#1d4ed8);}
.vital-pulse{background:linear-gradient(135deg,#16a34a,#15803d);}
.vital-weight{background:linear-gradient(135deg,#9333ea,#7e22ce);}

.vital-value{
font-size:28px;
font-weight:700;
}

.history-item{
padding:16px;
border-radius:14px;
border-left:5px solid #ff7b00;
background:#f8fafc;
margin-bottom:10px;
}

.btn-ohc{
background:linear-gradient(135deg,#ff7b00,#ff9d00);
border:none;
color:#fff;
border-radius:12px;
padding:11px 24px;
font-weight:600;
}

.btn-ohc:hover{
color:#fff;
transform:translateY(-2px);
}

body{
    background:#eef2f7;
    font-family:Segoe UI,Tahoma,sans-serif;
}

.a4-sheet{
    max-width:820px;
    margin:auto;
    background:#fff;
    padding:22px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.ohc-header{
    border-bottom:3px solid #8B4513;
    padding-bottom:12px;
    margin-bottom:18px;
}

.company-name{
    font-size:26px;
    font-weight:700;
    color:#8B4513;
}

.ohc-title{
    font-size:16px;
    color:#555;
}

.issue-no{
    font-size:18px;
    font-weight:700;
}

.section-card{
    border:1px solid #d8dee6;
    border-radius:10px;
    margin-bottom:14px;
}

.section-header{
    background:#f7f8fa;
    padding:8px 14px;
    border-bottom:1px solid #d8dee6;
    font-weight:600;
}

.section-body{
    padding:14px;
}

.info-label{
    font-size:11px;
    color:#6c757d;
    text-transform:uppercase;
}

.info-value{
    font-size:14px;
    font-weight:600;
}

.vital-box{
    border:1px solid #d8dee6;
    border-radius:8px;
    padding:10px;
    text-align:center;
}

.vital-value{
    font-size:20px;
    font-weight:700;
}

.table-sm td,
.table-sm th{
    padding:6px;
}

.signature-line{
    border-top:1px solid #000;
    margin-top:40px;
    text-align:center;
    padding-top:6px;
    font-size:13px;
}

.footer-note{
    font-size:11px;
    color:#666;
    text-align:center;
    margin-top:12px;
}

@media print{

body{
    background:#fff;
}

.no-print{
    display:none!important;
}

.a4-sheet{
    box-shadow:none;
    border:none;
    max-width:100%;
    padding:8mm;
}

@page{
    size:A4;
    margin:8mm;
}

.section-card{
    page-break-inside:avoid;
}

}