/* ============================================================
   HEXACLIN PHARMACY MANAGEMENT SYSTEM
   Responsive Modern Stylesheet
   ============================================================ */


:root {

    --primary: #217f77;
    --primary-dark: #176c65;
    --secondary: #0d6efd;

    --blue: #0253d4;
    --blue-dark: #0a3b8b;

    --green: #198754;
    --orange: #f59f00;
    --red: #dc3545;

    --sky: #eaf6ff;
    --background: #f5f7fb;

    --white: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;

    --border: #d1d5db;

    --shadow:
        0 4px 15px rgba(0, 0, 0, .12);

    --radius: 10px;

}



* {

    box-sizing: border-box;

}



html,
body {

    margin: 0;
    padding: 0;

    min-height: 100%;

}



body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        linear-gradient(135deg,
            #eef5ff,
            #ffffff);

    color: var(--text);

    font-size: 15px;

}




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


a {

    color: var(--primary);

    text-decoration: none;

}



a:hover {

    text-decoration: none;

}




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


.login-wrap {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.login-card {

    background: rgba(255, 255, 255, 0.566);

    width: 100%;

    max-width: 450px;

    padding: 35px;

    border-radius: 18px;

    box-shadow: var(--shadow);

    text-align: center;

}



.login-card h1 {

    font-size: 42px;

    font-weight: 800;

    color: var(--primary);

    margin-bottom: 25px;

}



.field {

    display: flex;

    margin-bottom: 15px;

}



.field .ico {

    width: 50px;

    background: var(--primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px 0 0 8px;

}



.field input {

    flex: 1;

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

    padding: 13px;

    border-radius: 0 8px 8px 0;

    background: #fafafa;

    font-size: 15px;

}



.btn-login {

    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 8px;

    background:

        linear-gradient(180deg,
            var(--primary),
            var(--primary-dark));

    color: white;

    font-weight: 700;

    cursor: pointer;

}



.btn-login:hover {

    opacity: .9;

}



.alert-error {

    background: #fde8e8;

    border: 1px solid #f5b5b5;

    color: #b42318;

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 15px;

}





/* ===========================
TOP BAR
=========================== */


.topbar {

    height: 60px;

    background:

        linear-gradient(180deg,
            var(--primary),
            var(--primary-dark));

    color: white;

    display: flex;

    align-items: center;

    padding: 0 18px;

    gap: 15px;

    position: sticky;

    top: 0;

    z-index: 1000;

}



.topbar .brand {

    font-size: 20px;

    font-weight: 800;

    white-space: nowrap;

}



.topbar .spacer {

    flex: 1;

}



.topbar .meta {

    display: flex;

    gap: 20px;

    align-items: center;

}



.topbar a {

    color: white;

}



.logout {

    color: #ffd5d5 !important;

}



.menu-toggle {

    display: none;

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

    border: none;

    color: white;

    font-size: 22px;

    padding: 8px 12px;

    border-radius: 8px;

    cursor: pointer;

}





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


.shell {

    display: flex;

    min-height:

        calc(100vh - 60px);

}



/* ===========================
   SIDEBAR MENU FIX
=========================== */

.sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: var(--primary-dark);
    padding: 14px 0;
    border-right: 2px solid #0b3f94;
}


.sidebar a {

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

    padding: 14px 18px;

    color: #ffffff;

    font-weight: 700;

    text-decoration: none;

    border-radius: 0 8px 8px 0;

    margin: 3px 0;

    transition: .2s ease;

}



.sidebar a i {

    width: 26px;

    text-align: center;

    font-size: 1.25rem;

}




/* Hover */

.sidebar a:hover {

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

    color: #062c6b;

    text-decoration: none;

}




/* ===============================
   SIDEBAR LINK FINAL FIX
================================ */

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 8px 8px 0;
    margin: 3px 0;
}


.sidebar-link i {
    width: 26px;
    text-align: center;
    color: #ffffff !important;
}


/* Hover */

.sidebar-link:hover {

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

    color: #000000 !important;

    text-decoration: none;

}


.sidebar-link:hover i {

    color: #000000 !important;

}



/* CURRENT ACTIVE PAGE */

.sidebar-link.active-link {

    background: #ffffff !important;

    color: #000000 !important;

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

}



.sidebar-link.active-link span,

.sidebar-link.active-link i {

    color: #000000 !important;

}



.content {

    flex: 1;

    padding: 20px;

    overflow: hidden;

}



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


.page-head {

    background: white;

    padding: 18px;

    border-radius:

        var(--radius) var(--radius) 0 0;

    box-shadow: var(--shadow);

    display: flex;

    align-items: center;

}



.page-head h1 {

    margin: 0;

    font-size: 28px;

    font-weight: 800;

    display: flex;

    gap: 12px;

    align-items: center;

}



.crumbs {

    background: #f1f1f1;

    padding: 12px 18px;

    border-radius:

        0 0 var(--radius) var(--radius);

    color: var(--muted);

}

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


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 18px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 700;

    font-size: 14px;

    color: white;

    background:

        linear-gradient(180deg,
            #176c65,
            #29857d);

    box-shadow: 0 3px 8px rgba(0, 0, 0, .15);

    transition: .2s;

    text-decoration: none;

}



.btn:hover {

    transform: translateY(-1px);

    color: white;

}



.btn-green {

    background:

        linear-gradient(180deg,
            #34d399,
            #198754);

}



.btn-orange {

    background:

        linear-gradient(180deg,
            #ffc107,
            #f59f00);

}



.btn-red {

    background:

        linear-gradient(180deg,
            #ef4444,
            #dc3545);

}



.btn-dark {

    background:

        linear-gradient(180deg,
            #555,
            #222);

}



.btn-sm {

    padding: 6px 10px;

    font-size: 12px;

}



.btn-block {
    background: #29857d;
    width: 100%;

}




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


input,
select,
textarea {

    width: 100%;

    padding: 12px 14px;

    border:

        1px solid var(--border);

    border-radius: 8px;

    background: white;

    font-size: 15px;

    outline: none;

}



input:focus,
select:focus,
textarea:focus {

    border-color: var(--primary);

    box-shadow:

        0 0 0 3px rgba(111, 66, 193, .15);

}



label {

    display: block;

    font-weight: 700;

    margin-bottom: 6px;

    color: #374151;

}




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


.card {

    background: white;

    border-radius:

        var(--radius);

    padding: 18px;

    box-shadow:

        var(--shadow);

    margin-bottom: 20px;

}




/* ===========================
STAT DASHBOARD
=========================== */


.stat-grid {

    display: grid;

    grid-template-columns:

        repeat(auto-fit,
            minmax(200px, 1fr));

    gap: 15px;

    margin-bottom: 20px;

}



.stat {

    background: white;

    padding: 20px;

    border-radius: 12px;

    box-shadow: var(--shadow);

    border-left: 6px solid var(--primary);

}



.stat.green {

    border-left-color: var(--green);

}



.stat.orange {

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

}



.stat.red {

    border-left-color: var(--red);

}



.stat .label {

    font-size: 13px;

    text-transform: uppercase;

    color: var(--muted);

}



.stat .value {

    font-size: 30px;

    font-weight: 800;

    margin-top: 8px;

}





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


.table-wrap {

    overflow-x: auto;

    background: white;

    border-radius: 10px;

    box-shadow: var(--shadow);

}



table.data {

    width: 100%;

    border-collapse: collapse;

    min-width: 750px;

}



table.data th {

    background: #f3f4f6;

    font-weight: 800;

    padding: 13px;

    border-bottom:

        2px solid var(--border);

    text-align: left;

}



table.data td {

    padding: 12px;

    border-bottom:

        1px solid #eee;

    vertical-align: middle;

}



table.data tbody tr:hover td {

    background: #faf5ff;

}




.actions {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

}




/* ===========================
SEARCH TOOLBAR
=========================== */


.toolbar {

    display: grid;

    grid-template-columns:

        1fr auto;

    gap: 12px;

    align-items: center;

    margin: 15px 0;

}




.filter-row {

    display: grid;

    grid-template-columns:

        repeat(auto-fit,
            minmax(180px, 1fr));

    gap: 15px;

    align-items: end;

}




.form-grid {

    display: grid;

    grid-template-columns:

        repeat(auto-fit,
            minmax(230px, 1fr));

    gap: 15px;

}




.form-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 20px;

}




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


.flash {

    background: #dcfce7;

    border:

        1px solid #86efac;

    color: #166534;

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 15px;

}



.alert-error {

    background: #fee2e2;

    border:

        1px solid #fca5a5;

    color: #991b1b;

    padding: 12px;

    border-radius: 8px;

}





.panel-danger {

    background: #fee2e2;

    padding: 18px;

    border-radius: 10px;

    color: #991b1b;

}



.panel-warn {

    background: #fef3c7;

    padding: 18px;

    border-radius: 10px;

    color: #92400e;

}




/* ===========================
REPORT PAGE
=========================== */


.report-title {

    text-align: center;

    font-size: 22px;

    font-weight: 800;

    margin: 20px;

}



.totals {

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

    font-size: 18px;

    font-weight: 700;

    padding: 15px;

}



.count {

    text-align: center;

    font-size: 18px;

    margin: 15px;

}




/* ===========================
PAYMENT MODAL
=========================== */


.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        rgba(0, 0, 0, .55);

    z-index: 9999;

}



.modal-box {

    background: white;

    width: 420px;

    max-width: 90%;

    margin: 80px auto;

    padding: 25px;

    border-radius: 15px;

    box-shadow:

        0 10px 30px rgba(0, 0, 0, .3);

}



.modal-box h2 {

    margin-top: 0;

    color: var(--primary);

}


/* ===============================
   USERS PAGE STYLE
================================ */

.users-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}


.users-card h3 {
    margin-top: 0;
    color: #0b3f94;
}


.user-name {
    font-weight: 700;
    color: #062c6b;
}


.user-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}


.status-active {

    background: #198754;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;

}


.status-inactive {

    background: #dc3545;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;

}


.role-admin {

    background: #6f42c1;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;

}


.role-cashier {

    background: #0d6efd;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;

}



@media(max-width:700px) {

    .data {

        font-size: 13px;

    }


    .btn-sm {

        padding: 5px 8px;

        font-size: 12px;

    }


}

/* ===========================
   RECEIPT / PRINT STYLE
=========================== */


.receipt {

    width: 380px;

    max-width: 95%;

    margin: 25px auto;

    background: white;

    padding: 25px;

    border-radius: 15px;

    box-shadow:

        0 5px 20px rgba(0, 0, 0, .15);

}



.receipt .center {

    text-align: center;

}



.receipt .logo {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    font-weight: 800;

}



.invoice-box {

    background: #f5f0ff;

    padding: 12px;

    border-radius: 10px;

    margin: 15px 0;

}



.payment {

    background: #f3f4f6;

    padding: 15px;

    border-radius: 10px;

    margin-top: 15px;

}



.payment div {

    display: flex;

    justify-content: space-between;

    margin: 7px 0;

}



.status {

    margin-top: 15px;

    padding: 12px;

    border-radius: 10px;

    background: #dcfce7;

    text-align: center;

    font-weight: 700;

}




.prescription {

    color: #dc3545;

    font-weight: 800;

    font-size: 13px;

}



.note {

    background: #fff3cd;

    padding: 10px;

    border-radius: 8px;

    margin-top: 8px;

    color: #856404;

    font-size: 13px;

}



.otc {

    color: #198754;

    font-weight: 700;

}





/* ===========================
PRINT REPORT / RECEIPT
=========================== */


@media print {


    body {

        background: white !important;

    }



    .topbar,
    .sidebar,
    .no-print,
    button,
    .btn {

        display: none !important;

    }



    .content {

        padding: 0 !important;

    }



    .card,
    .table-wrap {

        box-shadow: none !important;

        border: none !important;

    }



    .receipt {

        width: 100%;

        margin: 0;

        box-shadow: none;

    }



    table.data {

        min-width: 100%;

    }



    .page-head,
    .crumbs {

        display: none !important;

    }


}





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



@media(max-width:950px) {



    .menu-toggle {

        display: block;

    }



    .sidebar {

        position: fixed;

        top: 60px;

        left: 0;

        bottom: 0;

        z-index: 999;

        transform:

            translateX(-100%);

        transition: .3s;

        overflow-y: auto;

    }



    body.nav-open .sidebar {

        transform:

            translateX(0);

    }



    .content {

        padding: 12px;

    }



    .topbar {

        padding: 10px;

    }



    .topbar .meta {

        font-size: 13px;

        gap: 10px;

    }



}





@media(max-width:650px) {



    body {

        font-size: 14px;

    }



    .topbar .brand {

        font-size: 16px;

    }



    .page-head h1 {

        font-size: 20px;

    }



    .toolbar {

        grid-template-columns: 1fr;

    }



    .form-actions {

        flex-direction: column;

    }



    .form-actions .btn {

        width: 100%;

    }



    .card {

        padding: 14px;

    }



    .stat-grid {

        grid-template-columns: 1fr;

    }



    .login-card h1 {

        font-size: 32px;

    }



    .table-wrap {

        border-radius: 8px;

    }



}





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


.text-center {

    text-align: center;

}



.text-right {

    text-align: right;

}



.text-danger {

    color: var(--red);

}



.text-success {

    color: var(--green);

}



.text-muted {

    color: var(--muted);

}



.mt-1 {

    margin-top: 10px;

}



.mt-2 {

    margin-top: 20px;

}



.mb-1 {

    margin-bottom: 10px;

}



.mb-2 {

    margin-bottom: 20px;

}





/* ===========================
LOADING EFFECT
=========================== */


.loading {

    opacity: .6;

    pointer-events: none;

}




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


::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1;

}



::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--primary-dark);

}