e-ticket/assets/admin.scss

@import "tailwindcss";
@source "../templates";

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

.admin-body {
    background: #fbfbfb;
    color: #111827;
}

.admin-header {
    border-bottom: 4px solid #111827;
}

.admin-badge {
    border: 2px solid #111827;
    box-shadow: 3px 3px 0 rgb(0 0 0 / 100%);
    background: #fabf04;
}

.admin-main {
    max-width: 70rem;
    margin: 0 auto;
    padding: 2rem 1rem;
    width: 100%;
}

/* ===== Admin Nav ===== */

.admin-nav-active {
    background: #fabf04;
    border: 2px solid #111827;
    box-shadow: 2px 2px 0 rgb(0 0 0 / 100%);
}

.admin-nav-link {
    border: 2px solid #111827;
}

.admin-nav-dark {
    border: 2px solid #111827;
    background: #111827;
}

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

.admin-card {
    border: 4px solid #111827;
    box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
    background: white;
    padding: 1.5rem;
}

.admin-card-yellow {
    border: 4px solid #111827;
    box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
    background: #fabf04;
    padding: 1.5rem;
}

.admin-card-reject {
    border: 4px solid #991b1b;
    box-shadow: 6px 6px 0 rgb(0 0 0 / 100%);
    background: white;
    padding: 1.5rem;
}

/* ===== Admin Stats ===== */

.admin-stat-label {
    font-size: 10px;
    letter-spacing: 0.1em;
}

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

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead tr {
    background: #111827;
}

.admin-table thead th {
    padding: 0.75rem 1.5rem;
    text-align: left;
}

.admin-table thead th.text-center {
    text-align: center;
}

.admin-table thead th.text-right {
    text-align: right;
}

.admin-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.admin-table tbody td {
    padding: 0.75rem 1.5rem;
}

/* ===== Admin Detail Tables ===== */

.admin-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-detail-table thead tr {
    border-bottom: 2px solid #e5e7eb;
}

.admin-detail-table thead th {
    padding: 0.5rem 0;
    text-align: left;
}

.admin-detail-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.admin-detail-table tbody tr:last-child {
    border-bottom: none;
}

.admin-detail-table tbody td {
    padding: 0.5rem 0;
}

/* ===== Admin Forms ===== */

.admin-form-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.25rem;
}

.admin-form-label-lg {
    font-size: 10px;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

.admin-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid #111827;
    font-weight: 700;
    outline: none;
}

.admin-form-input-lg {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 3px solid #111827;
    font-weight: 700;
    outline: none;
}

.admin-form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 3px solid #111827;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    background: white;
}

.admin-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 3px solid #111827;
    font-weight: 700;
    outline: none;
    resize: vertical;
}

.admin-form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #111827;
    cursor: pointer;
}

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

.admin-btn {
    padding: 0.5rem 1rem;
    border: 3px solid #111827;
    box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
    background: #fabf04;
    cursor: pointer;
}

.admin-btn-sm {
    padding: 0.4rem 0.75rem;
    border: 2px solid #111827;
    cursor: pointer;
}

.admin-btn-sm-yellow {
    padding: 0.4rem 0.75rem;
    border: 2px solid #111827;
    background: #fabf04;
    cursor: pointer;
}

.admin-btn-sm-white {
    padding: 0.4rem 0.75rem;
    border: 2px solid #111827;
    background: white;
    cursor: pointer;
}

.admin-btn-sm-danger {
    padding: 0.4rem 0.75rem;
    border: 2px solid #991b1b;
    background: #dc2626;
    color: white;
    cursor: pointer;
}

.admin-btn-danger {
    padding: 0.5rem 1rem;
    border: 3px solid #991b1b;
    box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
    background: #dc2626;
    color: white;
    cursor: pointer;
}

.admin-btn-outline {
    padding: 0.5rem 1rem;
    border: 3px solid #111827;
    background: white;
    cursor: pointer;
}

.admin-btn-search {
    padding: 0.5rem 1rem;
    border: 2px solid #111827;
    background: #fabf04;
    cursor: pointer;
    white-space: nowrap;
}

.admin-btn-clear {
    padding: 0.5rem 1rem;
    border: 2px solid #111827;
    background: white;
    white-space: nowrap;
}

.admin-btn-lg {
    padding: 0.75rem 1.5rem;
    border: 3px solid #111827;
    box-shadow: 4px 4px 0 rgb(0 0 0 / 100%);
    background: #fabf04;
    cursor: pointer;
}

.admin-btn-lg-outline {
    padding: 0.75rem 1.5rem;
    border: 3px solid #111827;
}

/* ===== Admin Badges ===== */

.admin-badge-green {
    background: #d1fae5;
    border: 2px solid #111827;
    padding: 0.15rem 0.5rem;
}

.admin-badge-red {
    background: #fee2e2;
    border: 2px solid #111827;
    padding: 0.15rem 0.5rem;
}

.admin-badge-blue {
    background: #dbeafe;
    border: 2px solid #111827;
    padding: 0.15rem 0.75rem;
}

.admin-badge-yellow {
    background: #fef3c7;
    border: 2px solid #111827;
    padding: 0.15rem 0.75rem;
}

.admin-badge-indigo {
    background: #e0e7ff;
    border: 2px solid #111827;
    padding: 0.15rem 0.5rem;
}

.admin-badge-indigo-lg {
    background: #e0e7ff;
    border: 2px solid #111827;
    padding: 0.15rem 0.75rem;
}

/* ===== Admin Tabs ===== */

.admin-tab {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    border: 3px solid #111827;
}

.admin-tab-active {
    background: #fabf04;
}

.admin-tab-inactive {
    background: white;
}

.admin-tab-first {
    border-right: none;
}

/* ===== Admin Pagination ===== */

.admin-page-active {
    border: 2px solid #111827;
    padding: 0.4rem 0.75rem;
    background: #fabf04;
}

.admin-page-link {
    border: 2px solid #111827;
    padding: 0.4rem 0.75rem;
    background: white;
}

/* ===== Admin Download Link ===== */

.admin-download {
    border: 2px solid #111827;
    padding: 0.15rem 0.5rem;
    background: #fabf04;
    display: inline-block;
}