/* ==========================================================
   Zendix - Common Styles
   Shared across every page
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* ===========================
   CSS Variables
=========================== */

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;

    --success:#16a34a;
    --success-light:#dcfce7;

    --warning:#f59e0b;
    --warning-light:#fef3c7;

    --danger:#dc2626;
    --danger-dark: #b91c1c;
    --danger-light:#fee2e2;

    --gray-50:#f8fafc;
    --gray-100:#f1f5f9;
    --gray-200:#e2e8f0;
    --gray-300:#cbd5e1;
    --gray-400:#94a3b8;
    --gray-500:#64748b;
    --gray-600:#475569;
    --gray-700:#334155;
    --gray-800:#1e293b;
    --gray-900:#0f172a;

    --shadow-sm:0 2px 6px rgba(15,23,42,.06);
    --shadow:0 8px 24px rgba(15,23,42,.08);
    --shadow-lg:0 18px 40px rgba(15,23,42,.12);

    --radius-sm:8px;
    --radius:12px;
    --radius-lg:18px;

    --transition:.25s ease;

    --container:1100px;
}

/* ===========================
   Reset
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}

html{
    scroll-behavior:smooth;
}

body{    
    background:var(--gray-100);
    color:var(--gray-800);

    min-height:100vh;
    line-height:1.6;
}

/* ===========================
   Typography
=========================== */

h1,h2,h3,h4,h5,h6{
    color:var(--gray-900);
    font-weight:700;
    line-height:1.2;
}

h1{font-size:2rem;}
h2{font-size:1.6rem;}
h3{font-size:1.3rem;}

p{
    color:var(--gray-600);
}

small{
    color:var(--gray-500);
}

a{
    color:var(--primary);
    text-decoration:none;
}



/* a:hover{
    text-decoration:underline;
} */

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

.navbar {

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

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

}

.navbar-inner {

    max-width: 1200px;

    margin: 0 auto;

    padding: 1rem 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

}

.navbar-logo {

    text-decoration: none;

    color: #111827;

    font-size: 1.3rem;

    font-weight: 700;

}

.nav-links {

    display: flex;

    align-items: center;

    gap: .5rem;

}

.nav-links a {

    text-decoration: none;

    color: #4b5563;

    font-weight: 500;

    padding: .45rem 1rem;

    border-radius: .75rem;

    transition: .2s;

}

.nav-links a:hover {

    background: #eff6ff;

    color: var(--primary);

}

.nav-links a.active {

    background: var(--primary);

    color: white;

}

.menu-button {

    display: none;

    border: none;

    background: none;

    color: #111827;

    font-size: 1.5rem;

    cursor: pointer;

    padding: .25rem .5rem;

}

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

.page {

    max-width: 1200px;

    margin: 2rem auto;

    padding: 0 1.5rem;

}

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

@media (max-width:768px) {

    .menu-button {

        display: block;

    }

    .nav-links {

        display: none;

        position: absolute;

        top: calc(100% + 1px);

        left: 0;

        right: 0;

        background: white;

        border-bottom: 1px solid #e5e7eb;

        flex-direction: column;

        align-items: stretch;

        padding: .75rem;

        gap: .25rem;

    }

    .nav-links.open {

        display: flex;

    }

    .nav-links a {

        width: 100%;

        text-align: left;

    }

}

/* ===========================
   Layout
=========================== */

/* .page{
    max-width:var(--container);
    margin:auto;
    padding:32px 20px 60px;
} */

.page-header{
    margin-bottom:28px;
}

.page-title{
    margin-bottom:8px;
}

.page-subtitle{
    color:var(--gray-500);
}

/* ===========================
   Cards
=========================== */

.card{
    background:white;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:24px;
    margin-bottom:20px;
    transition:var(--transition);
}

.card:hover{
    box-shadow:var(--shadow-lg);
}

.card-title{
    font-size:1.1rem;
    margin-bottom:18px;
}

/* ===========================
   Form Layout
=========================== */

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

.form-row{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.form-row .form-group{
    flex:1;
}

/* ===========================
   Labels
=========================== */

label{
    margin-bottom:8px;
    font-weight:600;
    color:var(--gray-700);
}

/* ===========================
   Inputs
=========================== */

input,
textarea,
select{

    width:100%;

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

    border-radius:12px;

    padding:13px 14px;

    font-size:.96rem;

    transition:var(--transition);

    background:white;

    outline:none;
}

textarea{
    resize:vertical;
    min-height:140px;
}

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

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);
}

/* ===========================
   Buttons
=========================== */

/* button{
    cursor:pointer;
    border:none;
    transition:var(--transition);
}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 20px;

    border-radius:12px;

    font-weight:600;

    font-size:.95rem;
}

.btn-primary{

    background:var(--primary);

    color:white;
}

.btn-primary:hover{

    background:var(--primary-dark);
}

.btn-secondary{

    background:var(--gray-200);

    color:var(--gray-800);
}

.btn-secondary:hover{

    background:var(--gray-300);
}

.btn-success{

    background:var(--success);

    color:white;
}

.btn-success:hover{

    filter:brightness(.95);
}

.btn-danger{

    background:var(--danger);

    color:white;
}

.btn-danger:hover{

    filter:brightness(.95);
}

.btn:disabled{

    opacity:.55;

    cursor:not-allowed;
} */


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

.primary-btn,
.secondary-btn,
.danger-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;

    min-width: 120px;
    height: 44px;

    padding: 0 18px;

    border-radius: 12px;
    border: none;

    cursor: pointer;

    font-size: 14px;
    font-weight: 600;

    transition: .2s;
}

.primary-btn {
    background: var(--primary);
    color: white;
}

.primary-btn:hover {
    background: var(--primary-dark);
}

.secondary-btn {
    background: #f1f5f9;
    color: #334155;
}

.secondary-btn:hover {
    background: #e2e8f0;
}

.danger-btn {
    background: var(--danger);
    color: white;
}

.danger-btn:hover {
    background: var(--danger-dark);
}

button:disabled{

    opacity:.55;

    cursor:not-allowed;
}


/* ===========================
   Badge
=========================== */

.badge{

    display:inline-block;

    padding:4px 10px;

    border-radius:999px;

    font-size:.78rem;

    font-weight:600;
}

.badge-success{
    background:var(--success-light);
    color:var(--success);
}

.badge-warning{
    background:var(--warning-light);
    color:#92400e;
}

.badge-danger{
    background:var(--danger-light);
    color:var(--danger);
}

.badge-info{
    background:var(--primary-light);
    color:var(--primary);
}

/* ===========================
   Tables
=========================== */

.table-wrapper{

    overflow:auto;

    border-radius:12px;

    border:1px solid var(--gray-200);
}

table{

    width:100%;

    border-collapse:collapse;

    background:white;
}

th{

    background:var(--gray-100);

    text-align:left;

    padding:14px;

    font-weight:600;
}

td{

    padding:14px;

    border-top:1px solid var(--gray-200);
}

/* ===========================
   Alerts
=========================== */

.alert{

    border-radius:12px;

    padding:14px 16px;

    margin-bottom:18px;
}

.alert-success{

    background:var(--success-light);

    color:var(--success);
}

.alert-danger{

    background:var(--danger-light);

    color:var(--danger);
}

.alert-warning{

    background:var(--warning-light);

    color:#92400e;
}

/* ===========================
   Toast
=========================== */

.toast{

    position:fixed;

    bottom:24px;

    right:24px;

    background:var(--gray-900);

    color:white;

    padding:14px 20px;

    border-radius:12px;

    box-shadow:var(--shadow-lg);

    opacity:0;

    transform:translateY(20px);

    pointer-events:none;

    transition:.25s;
}

.toast.show{

    opacity:1;

    transform:none;
}

/* ===========================
   Modal
=========================== */

.modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:1000;
}

.modal.show{

    display:flex;
}

.modal-card{

    width:min(420px,92vw);

    background:white;

    border-radius:18px;

    padding:24px;

    box-shadow:var(--shadow-lg);

    max-height: calc(90vh);
    
    overflow: hidden;

}

.modal-body {

    padding: .5rem;

    max-height: calc(25vh);

    overflow: auto;

    flex: 1;

    margin: 1rem 0;

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

    border-radius:10px;

}

.modal-body::-webkit-scrollbar{
    width: 9px;
    height: 9px;
}

.modal-body::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:10px;
}

.modal-body::-webkit-scrollbar-track{
    background:transparent;
}

.modal p {

    color: #6b7280;
    
    /* margin: 1rem 0; */

}

.modal-actions{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    /* margin-top:22px; */
}

/* ===========================
   Spinner
=========================== */

.processing-spinner{

    width:56px;

    height:56px;

    margin: 0 auto 22px;

    border:4px solid var(--gray-300);

    border-top-color:var(--primary);

    border-radius:50%;

    animation: processing-spin .8s linear infinite;
}

@keyframes processing-spin{

    to{
        transform:rotate(360deg);
    }
}

/* ===========================
   Empty State
=========================== */

.empty-state{

    text-align:center;

    padding:60px 24px;

    color:var(--gray-500);
}

.empty-state h3{

    margin-bottom:10px;
}

/* ===========================
   Utilities
=========================== */

.flex{
    display:flex;
}

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

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.gap-8{gap:8px;}
.gap-12{gap:12px;}
.gap-16{gap:16px;}
.gap-20{gap:20px;}

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

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

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

.hidden{
    display:none !important;
}

/* ===========================
   Responsive
=========================== */

@media (max-width:768px){

    /* .page{
        padding:22px 16px 50px;
    } */

    .form-row{
        flex-direction:column;
    }

    .flex-between{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .btn{
        width:100%;
    }

    .modal-card{
        width:95%;
    }

    .toast{
        left:16px;
        right:16px;
        bottom:16px;
    }
}