/* =====================================================
   DINEX SAAS
   GLOBAL STYLES
===================================================== */

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =====================================================
   ROOT
===================================================== */

:root {

    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;

    --success-color: #16a34a;
    --danger-color: #dc2626;
    --warning-color: #f59e0b;

    --background-color: #f5f7fb;
    --surface-color: #ffffff;

    --border-color: #d1d5db;

    --text-color: #111827;
    --text-light: #6b7280;

    --sidebar-width: 260px;

    --radius: 8px;

    --shadow:
        0 2px 8px rgba(0,0,0,0.08);

    --transition:
        0.2s ease-in-out;
}

/* =====================================================
   BODY
===================================================== */

body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    color:
        var(--text-color);

    min-height: 100vh;
}

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

a {

    text-decoration: none;

    color:
        var(--primary-color);

}

a:hover {

    text-decoration: underline;

}

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

button {

    cursor: pointer;

    border: none;

    transition:
        var(--transition);

}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: var(--radius);

    font-size: 14px;

    font-weight: 600;
}

.btn-primary {

    background:
        var(--primary-color);

    color: white;

}

.btn-primary:hover {

    background:
        var(--primary-hover);

}

.btn-success {

    background:
        var(--success-color);

    color: white;

}

.btn-danger {

    background:
        var(--danger-color);

    color: white;

}

.btn-warning {

    background:
        var(--warning-color);

    color: white;

}

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

input,
select,
textarea {

    width: 100%;

    padding: 10px 12px;

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

    border-radius:
        var(--radius);

    font-size: 14px;

    outline: none;

}

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

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

}

/* =====================================================
   LABELS
===================================================== */

label {

    display: block;

    margin-bottom: 6px;

    font-size: 14px;

    font-weight: 600;

}

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

.form-group {

    margin-bottom: 16px;

}

.form-row {

    display: flex;

    gap: 16px;

}

.form-row .form-group {

    flex: 1;

}

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

.card {

    background:
        var(--surface-color);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    padding: 20px;

}

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

.table-container {

    overflow-x: auto;

}

table {

    width: 100%;

    border-collapse: collapse;

    background:
        white;

}

table th {

    background:
        #eef2ff;

    padding: 12px;

    text-align: left;

}

table td {

    padding: 12px;

    border-top:
        1px solid #e5e7eb;

}

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

.badge {

    display: inline-block;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 600;

}

.badge-success {

    background:
        #dcfce7;

}

.badge-danger {

    background:
        #fee2e2;

}

.badge-warning {

    background:
        #fef3c7;

}

/* =====================================================
   AUTH
===================================================== */

.auth-container {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

}

.auth-card {

    width: 100%;

    max-width: 500px;

}

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

.dashboard-layout {

    display: flex;

    min-height: 100vh;

}

.sidebar {

    width:
        var(--sidebar-width);

    background:
        white;

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

}

.content {

    flex: 1;

    padding: 20px;

}

/* =====================================================
   UTILITIES
===================================================== */

.hidden {

    display: none !important;

}

.text-center {

    text-align: center;

}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }