:root {
    --bg-color: #1a1a1a;
    --card-bg: #2a2a2a;
    --accent: #0e7a0d;
    --accent-hover: #149814;
    --text-color: #eee;
    --border-color: #444;
    --device-card-bg: rgba(16, 22, 34, 0.95);
    --device-header-bg: rgba(22, 30, 46, 0.98);
    --device-border: rgba(78, 163, 255, 0.28);
    --device-accent: #4ea3ff;
    --device-accent-soft: rgba(78, 163, 255, 0.14);
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    padding-bottom: 60px; /* space for fixed footer */
}

body.login-page {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(30, 64, 175, 0.35), transparent 55%),
        radial-gradient(circle at bottom, rgba(22, 163, 74, 0.25), transparent 60%),
        var(--bg-color);
}

body.login-page .container {
    max-width: 460px;
    width: 100%;
    padding: clamp(24px, 6vh, 56px) clamp(18px, 5vw, 32px);
    box-sizing: border-box;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

body.login-page .footer {
    margin-top: auto;
    width: 100%;
    text-align: center;
    padding: 16px 0;
    background: transparent;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-hover);
}

.container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
    padding-top: 20px;
}

.header {
    background: var(--card-bg);
    padding: 10px;
    margin: -20px -20px 0 -20px;
    display: flex;
    align-items: center;
    position: relative;
}

.header__logo {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 260px;
    text-decoration: none;
}

.header__logo img {
    display: block;
    max-height: 52px;
    width: auto;
    max-width: 100%;
}

.header__logo span {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-color);
}

.store-select-form {
    margin-right: 15px;
}
.store-select-form label {
    font-weight: bold;
    color: var(--text-color);
    display: flex;
    align-items: center;
}
.store-select-form select {
    padding: 8px;
    margin-left: 5px;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.header nav {
    margin-left: auto;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5em;
    margin-left: auto;
    cursor: pointer;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: row-reverse;
    padding: 0;
    margin: 0;
}

.nav-menu > li {
    position: relative;
    margin-left: 10px;
}

.nav-menu > li > a {
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
}

.nav-menu > li > a:hover {
    color: var(--accent-hover);
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 5px 0;
    min-width: 160px;
    z-index: 100;
}

.dropdown-content li a {
    color: var(--text-color);
    padding: 8px 15px;
    display: block;
    white-space: nowrap;
}

.dropdown-content li a:hover {
    background: var(--accent);
    color: #fff;
}

.dropdown:hover > .dropdown-content {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

/* show dropdowns when toggled via script */
.dropdown.open > .dropdown-content {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.clearfix::after { content:""; display:block; clear:both; }
ul.store-list { list-style:none; padding:0; }
ul.store-list li { margin:5px 0; }
input, button {
    padding: 10px;
    margin: 5px 0;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.po-item-form,
.parts-item-form,
.compact-form {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.input-narrow {
    width: 80px;
}
.input-compact {
    width: 110px;
}

input:focus {
    outline: none;
    border-color: var(--accent);
}

button,
.button {
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1em;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.button--primary {
    background: var(--accent);
    color: #fff;
}

.button--danger {
    background: #dc2626;
    color: #fff;
}

.button--danger:hover {
    background: #ef4444;
}

.button--subtle {
    background: rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.45);
}

.button--subtle:hover {
    background: rgba(148, 163, 184, 0.35);
}

.button--ghost {
    background: transparent;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.45);
}

.button--ghost:hover {
    background: rgba(148, 163, 184, 0.15);
}

button:disabled,
.button:disabled {
    background: #555;
    cursor: not-allowed;
}


.open-button {
    font-size: 1.2em;
    padding: 14px 28px;
}

.kiosk-button {
    font-size: 1.2em;
    padding: 10px 24px;
}

.delete-button {
    background: #ff4d4f;
    font-size: 0.9em;
    padding: 8px 16px;
}

.delete-button:hover {
    background: #ff6f71;
}

/* Custom buttons for payment modal */
.submit-button {
    background: #007bff;
}
.submit-button:hover {
    background: #3399ff;
}
.cancel-button {
    background: #ff4d4f;
}
.cancel-button:hover {
    background: #ff6f71;
}

button:hover,
.button:hover {
    background: var(--accent-hover);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.button.selected {
    background: var(--accent-hover);
    box-shadow: 0 0 0 2px var(--accent);
}
.payment-option {
    background: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    margin-right: 5px;
}
.payment-option:hover {
    background: none;
}
.payment-option.selected {
    background: var(--accent-hover);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}
.payment-choice-group {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.payment-message {
    margin-top: 10px;
    min-height: 20px;
}
.payment-form {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.tax-holiday-note {
    margin-top: 10px;
    color: #0a7f0a;
}
.tax-note-original {
    color: #bbb;
    font-size: 0.85em;
    margin-left: 4px;
}
.inline-form {
    display: inline-block;
    margin: 0;
}

.button-glow {
    position: relative;
    background: linear-gradient(135deg, #1db954, #1c8adb);
    box-shadow: 0 12px 25px rgba(29, 185, 84, 0.35);
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.button-glow:hover {
    box-shadow: 0 16px 32px rgba(29, 185, 84, 0.45);
    transform: translateY(-1px);
}

.command-center {
    margin-bottom: 35px;
    border-radius: 18px;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45);
    background: linear-gradient(135deg, rgba(18, 18, 18, 0.96), rgba(9, 9, 9, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.command-center__handle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 28px;
    background: rgba(0, 0, 0, 0.3);
    color: #f2f2f2;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.command-center__handle:hover,
.command-center__handle:focus {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.command-center__handle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.command-center__handle-icon i {
    transition: transform 0.3s ease;
}

.command-center--collapsed .command-center__handle-icon i {
    transform: rotate(180deg);
}

.command-center--collapsed .command-center__handle {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.command-center__content {
    padding: 0 28px 32px 28px;
}

.command-center__content[hidden] {
    display: none;
}

.command-center__content .store-hero {
    margin-bottom: 30px;
}

.account-layout {
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    text-align: left;
}

.account-card {
    background: var(--card-bg);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.account-card h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5f5f5;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.account-form label {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    gap: 6px;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-color);
}

.account-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.account-form .button {
    align-self: flex-start;
}

.account-card .button {
    background: linear-gradient(135deg, #1db954, #1c8adb);
    border: none;
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-card .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(29, 185, 84, 0.35);
}

.store-hero {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(28, 138, 219, 0.55), transparent 55%),
        radial-gradient(circle at bottom left, rgba(29, 185, 84, 0.45), transparent 60%),
        linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(26, 26, 26, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45);
    margin-bottom: 35px;
}

.store-hero::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: rgba(29, 185, 84, 0.18);
    border-radius: 50%;
    filter: blur(10px);
}

.store-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.store-hero__logo {
    flex-shrink: 0;
    max-width: 180px;
}

.store-hero__logo img {
    display: block;
    max-height: 56px;
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 24px rgba(5, 20, 10, 0.25);
}

.store-hero__title h1 {
    font-size: 2.25rem;
    margin: 5px 0 10px 0;
}

.store-hero__subtitle {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.store-hero__meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
}

.store-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.store-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    backdrop-filter: blur(6px);
}

.store-hero__link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.metric-grid {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-card {
    padding: 18px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: 8px;
    justify-items: start;
    backdrop-filter: blur(8px);
    min-height: 140px;
}

.metric-card__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
    border-radius: 12px;
    color: #1db954;
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.metric-card__label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}

.metric-card__value {
    font-size: 1.8rem;
    font-weight: 700;
}

.metric-card__hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: auto;
}

.alert-card {
    margin: 10px 0;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}

.alert-card.success {
    color: #6dd66d;
}

.alert-card.error {
    color: #ff6b6b;
}

.alert-card.info-card {
    color: #6bc3ff;
}

.status-chip-bar {
    margin-top: 25px;
    display: grid;
    gap: 12px;
}

.status-chip-bar__title {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
}

.status-chip-bar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.status-chip__count {
    font-weight: 700;
}

.status-chip__label {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.ticket-table-card {
    margin-top: 30px;
    background: rgba(20, 20, 22, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.ticket-table-card__header {
    padding: 16px 22px;
    text-align: left;
    background: rgba(14, 14, 16, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.ticket-table-card__header h2 {
    margin: 0;
    font-size: 1.45rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
}

.ticket-table-card__header p {
    margin: 0;
    color: rgba(220, 220, 230, 0.62);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.ticket-table-card__body {
    padding: 20px 24px 28px 24px;
}

.ticket-queue-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    border-radius: 0;
    background: none;
    margin-bottom: 22px;
}

.queue-toggle-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.queue-toggle-button:hover {
    color: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

.queue-toggle-button.is-active {
    background: rgba(51, 151, 96, 0.28);
    color: #fff;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

.queue-toggle-button__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.queue-toggle-button__count {
    min-width: 36px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
}

.queue-toggle-button.is-active .queue-toggle-button__count {
    background: rgba(9, 24, 15, 0.6);
}

.queue-panel {
    display: none;
    animation: fadeIn 0.25s ease;
}

.queue-panel.is-active {
    display: block;
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.65);
}

.empty-state__icon {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.25);
}

.empty-state__text {
    max-width: 420px;
}

.admin-back-link {
    margin-top: 20px;
    text-align: left;
}

.admin-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-back-link a:hover {
    background: rgba(255, 255, 255, 0.08);
}

table.tickets {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    background: rgba(16, 16, 18, 0.9);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

table.tickets th,
table.tickets td {
    padding: 10px 12px;
    text-align: left;
}

table.tickets th {
    background: rgba(12, 12, 14, 0.9);
    color: rgba(245, 245, 248, 0.82);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

table.tickets td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(240, 240, 244, 0.88);
}

table.tickets tr:last-child td {
    border-bottom: none;
}

table.tickets tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

table.tickets tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.contact-cell,
.devices-cell {
    word-break: break-word;
    white-space: normal;
}

.actions-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.actions-group form {
    margin: 0;
    display: flex;
    align-items: center;
}

.queue-panel table.tickets {
    margin-top: 22px;
    border-collapse: separate;
    border-spacing: 0 12px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
}

.queue-panel table.tickets th,
.queue-panel table.tickets td {
    border: none;
}

.queue-panel table.tickets tr:nth-child(even),
.queue-panel table.tickets tr:hover {
    background: transparent;
}

.queue-panel table.tickets th {
    background: rgba(14, 14, 16, 0.92);
    color: rgba(236, 236, 242, 0.85);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.queue-panel table.tickets th:first-child {
    border-top-left-radius: 16px;
}

.queue-panel table.tickets th:last-child {
    border-top-right-radius: 16px;
}

.queue-panel table.tickets tr.ticket-row {
    background: rgba(18, 18, 22, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.32);
    transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.queue-panel table.tickets tr.ticket-row td {
    border: none;
    padding: 18px 20px;
    vertical-align: middle;
    color: rgba(240, 240, 244, 0.92);
}

.queue-panel table.tickets tr.ticket-row td:first-child {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.queue-panel table.tickets tr.ticket-row td:last-child {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.queue-panel table.tickets tr.ticket-row:hover {
    transform: translateY(-2px);
    border-color: rgba(58, 190, 110, 0.45);
    box-shadow: 0 22px 34px rgba(0, 0, 0, 0.42);
    background: rgba(20, 24, 20, 0.95);
}

.queue-panel table.tickets tr.ticket-row.ticket-row--closing {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    filter: blur(4px);
    pointer-events: none;
    transition: opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}


.queue-panel table.tickets tr.ticket-row--pending {
    background: #7f1d1d;
    border-color: #450a0a;
    box-shadow: 0 18px 30px rgba(69, 10, 10, 0.32);
}

.queue-panel table.tickets tr.ticket-row--pending td {
    color: #f9fafb;
}

.queue-panel table.tickets tr.ticket-row--pending:hover {
    background: #991b1b;
    border-color: #7f1d1d;
    box-shadow: 0 22px 34px rgba(69, 10, 10, 0.38);
}

.queue-panel table.tickets tr.ticket-row--pending:hover td {
    color: #f9fafb;
}

.queue-panel table.tickets .toggle-col {
    width: 60px;
    text-align: center;
}

.queue-panel table.tickets tr.device-row td {
    background: var(--device-card-bg);
    border: 1px solid var(--device-border);
    border-top: none;
    padding: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: inset 0 1px 0 var(--device-accent-soft);
}

.ticket-table-scroll {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-color: rgba(51, 168, 100, 0.5) rgba(12, 20, 16, 0.75);
}

.ticket-table-scroll::-webkit-scrollbar {
    height: 8px;
}

.ticket-table-scroll::-webkit-scrollbar-track {
    background: rgba(12, 20, 16, 0.75);
    border-radius: 999px;
}

.ticket-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(51, 168, 100, 0.55);
    border-radius: 999px;
}



.queue-panel table.tickets .ticket-field-label {
    display: none;
}

.toggle-col {
    text-align: center;
    width: 40px;
}

.icon-button.toggle-devices {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(22, 62, 40, 0.75);
    border: 1px solid rgba(51, 168, 100, 0.55);
    color: #38d37a;
    box-shadow: 0 12px 22px rgba(8, 28, 18, 0.4);
}

@media (max-width: 1200px) {
    .ticket-table-card__body {
        padding: 18px;
    }
    table.tickets th,
    table.tickets td {
        padding: 10px 12px;
    }
}

@media (max-width: 1024px) {
    .queue-panel table.tickets tr.ticket-row td {
        padding: 16px;
    }
    .actions-group {
        gap: 8px;
    }
}

@media (max-width: 900px) {
    .ticket-table-card__body {
        padding: 16px 14px 24px;
    }
    .ticket-table-scroll {
        padding: 0 4px 8px;
    }
    .queue-panel table.tickets {
        border-spacing: 0;
    }
    .queue-panel table.tickets thead {
        display: none;
    }
    .queue-panel table.tickets tbody,
    .queue-panel table.tickets tr,
    .queue-panel table.tickets td {
        display: block;
        width: 100%;
    }
    .queue-panel table.tickets tr.ticket-row {
        margin-bottom: 18px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(16, 16, 18, 0.92);
        overflow: hidden;
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.38);
    }
    .queue-panel table.tickets tr.ticket-row td {
        padding: 14px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .queue-panel table.tickets .ticket-field-label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(236, 236, 242, 0.6);
    }
    .queue-panel table.tickets tr.ticket-row td:last-child {
        border-bottom: none;
    }
    .queue-panel table.tickets tr.ticket-row td.toggle-col {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .queue-panel table.tickets tr.ticket-row td.toggle-col .ticket-field-label,
    .queue-panel table.tickets tr.ticket-row td.payment-cell .ticket-field-label,
    .queue-panel table.tickets tr.ticket-row td.status-cell .ticket-field-label,
    .queue-panel table.tickets tr.ticket-row td.estimate-cell .ticket-field-label,
    .queue-panel table.tickets tr.ticket-row td.tax-cell .ticket-field-label,
    .queue-panel table.tickets tr.ticket-row td.total-cell .ticket-field-label {
        margin-bottom: 0;
    }
    .queue-panel table.tickets tr.ticket-row td.payment-cell,
    .queue-panel table.tickets tr.ticket-row td.status-cell,
    .queue-panel table.tickets tr.ticket-row td.estimate-cell,
    .queue-panel table.tickets tr.ticket-row td.tax-cell,
    .queue-panel table.tickets tr.ticket-row td.total-cell {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .queue-panel table.tickets tr.ticket-row td.status-cell select.status-select {
        width: 100%;
        min-width: 360px;
    }
    .queue-panel select.location-select,
    select.status-select {
        max-width: none;
    }
    .queue-panel table.tickets tr.ticket-row td.actions-cell {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .queue-panel table.tickets tr.ticket-row td.actions-cell .ticket-field-label {
        width: 100%;
        margin-bottom: 2px;
    }
    .actions-group {
        width: auto;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .actions-group a,
    .actions-group form {
        width: auto;
    }
    .actions-group form {
        display: flex;
    }
    .actions-group .icon-button {
        width: auto;
        justify-content: center;
    }
    .queue-panel table.tickets tr.ticket-row td.ticket-id-cell .ticket-id-button,
    .queue-panel table.tickets tr.ticket-row td.payment-cell .icon-button {
        width: 100%;
        justify-content: center;
    }
    .queue-panel table.tickets tr.ticket-row td.actions-cell .icon-button {
        width: auto;
        justify-content: center;
    }
    .queue-panel table.tickets tr.ticket-row td.payment-cell {
        width: 100%;
    }
    .queue-panel table.tickets tr.device-row {
        display: block;
        margin-top: -10px;
    }
    .queue-panel table.tickets tr.device-row td {
        display: block;
    }
    .queue-panel table.tickets tr.device-row td.device-table-cell {
        padding: 18px 18px 22px;
        border-radius: 18px;
    }
    .device-table {
        border-radius: 0;
    }
    .device-table thead {
        display: none;
    }
    .device-table tbody,
    .device-table tr {
        display: block;
        width: 100%;
    }
    .device-table td {
        display: block;
        width: 100%;
    }
    .device-table tbody {
        padding: 0;
    }
    .device-table tbody tr {
        margin-bottom: 14px;
        padding: 16px;
        border: 1px solid var(--device-border);
        border-radius: 16px;
        background: rgba(16, 26, 40, 0.96);
        box-shadow: 0 16px 32px rgba(8, 16, 30, 0.35);
    }
    .device-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .device-table tbody td {
        padding: 0;
        border: none;
        margin-bottom: 12px;
    }
    .device-table tbody td:last-child {
        margin-bottom: 0;
    }
    .device-field-label {
        display: block;
    }
    .device-parts-cell .parts-field {
        flex-direction: column;
        align-items: stretch;
    }
    .device-parts-cell .parts-cost-input {
        width: 100%;
    }
    .device-parts-cell .parts-button {
        width: 100%;
    }
    .labor-field {
        width: 100%;
    }
    .labor-field .labor-cost-input,
    .labor-field select {
        max-width: none;
    }
    .device-print-cell .icon-button.print-button {
        max-width: none;
    }
}

.icon-button.toggle-devices:hover {
    color: #fff;
    background: rgba(51, 168, 100, 0.82);
    border-color: rgba(51, 168, 100, 0.9);
    box-shadow: 0 16px 26px rgba(8, 28, 18, 0.5);
    transform: translateY(-1px);
}

.icon-button.toggle-devices.is-open {
    color: #fff;
    background: rgba(51, 168, 100, 0.92);
    border-color: rgba(51, 168, 100, 0.95);
    box-shadow: 0 20px 32px rgba(8, 28, 18, 0.55);
}

.icon-button.toggle-devices i {
    font-size: 0.9rem;
}

.icon-button.ticket-id-button {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}

.icon-button.ticket-id-button:hover {
    background: rgba(51, 168, 100, 0.3);
    border-color: rgba(51, 168, 100, 0.5);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
}

.icon-button.ticket-id-button:focus-visible {
    outline: 2px solid rgba(28, 138, 219, 0.6);
    outline-offset: 3px;
}

select.status-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(10, 32, 23, 0.95);
    background-image: linear-gradient(135deg, rgba(61, 214, 130, 0.55), rgba(61, 214, 130, 0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364f3ae' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 9px 9px, 9px 9px;
    border: 1px solid rgba(61, 214, 130, 0.55);
    color: #e9fff4;
    padding: 9px 24px 9px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    width: 100%;
    max-width: 420px;
    margin: 0;
}

select.status-select:hover {
    background-color: rgba(18, 58, 41, 0.95);
    border-color: rgba(81, 240, 150, 0.75);
}

select.status-select:focus {
    outline: none;
    border-color: rgba(81, 240, 150, 0.9);
    box-shadow: 0 0 0 3px rgba(61, 214, 130, 0.3);
    transform: translateY(-1px);
}

select.status-select option {
    background-color: #11251a;
    color: #f0fff9;
}

.queue-panel select.location-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(12, 24, 36, 0.92);
    background-image: linear-gradient(135deg, rgba(78, 163, 255, 0.45), rgba(78, 163, 255, 0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234ea3ff' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px, 14px 14px;
    border: 1px solid var(--device-border);
    color: rgba(222, 235, 255, 0.92);
    padding: 10px 36px 10px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    width: 100%;
    max-width: 230px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    margin: 0;
}

.queue-panel select.location-select:hover {
    background-color: rgba(20, 36, 54, 0.96);
    border-color: rgba(78, 163, 255, 0.55);
}

.queue-panel select.location-select:focus {
    outline: none;
    border-color: rgba(110, 186, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(78, 163, 255, 0.25);
    background-color: rgba(20, 36, 54, 0.96);
}

.queue-panel select.location-select option {
    background-color: rgba(10, 18, 30, 0.95);
    color: rgba(222, 235, 255, 0.92);
}

.device-row td {
    padding: 0;
    border-top: none;
}
.device-row {
    display: none;
}

.device-table-wrap {
    width: 100%;
}

.queue-panel table.tickets tr.device-row td.device-table-cell {
    padding: 20px 22px 24px;
    background: rgba(8, 14, 26, 0.78);
    border-top: 1px solid var(--device-border);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.queue-panel table.tickets tr.device-row td.device-table-cell .device-table {
    margin: 0;
}

.device-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}

.device-table thead th:nth-child(1),
.device-table td.device-info-cell {
    width: 38%;
}

.device-table thead th:nth-child(2),
.device-table td.device-location-cell {
    width: 20%;
}

.device-table thead th:nth-child(3),
.device-table td.device-parts-cell {
    width: 18%;
}

.device-table thead th:nth-child(4),
.device-table td.device-labor-cell {
    width: 16%;
}

.device-table thead th:nth-child(5),
.device-table td.device-print-cell {
    width: 8%;
}

.device-table thead th {
    background: var(--device-header-bg);
    color: rgba(222, 235, 255, 0.82);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 18px;
    border-bottom: 1px solid var(--device-border);
}

.device-table tbody td {
    background: var(--device-card-bg);
    color: rgba(226, 237, 255, 0.9);
    padding: 16px 20px;
    border-bottom: 1px solid var(--device-border);
    vertical-align: middle;
}

.device-table tbody tr:last-child td {
    border-bottom: none;
}

.device-field-label {
    display: none;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(203, 218, 242, 0.6);
    margin-bottom: 6px;
}

.device-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
}

.device-info-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(232, 240, 255, 0.96);
}

.device-info-meta {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(185, 206, 236, 0.7);
}

.device-info-serial {
    font-size: 0.82rem;
    color: rgba(120, 199, 255, 0.82);
    letter-spacing: 0.03em;
}

.device-info-cell {
    font-weight: 600;
    line-height: 1.4;
}

.device-location-select-wrap {
    width: 100%;
    max-width: 230px;
}

.device-parts-cell .parts-field {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    max-width: 100%;
}

.device-parts-cell .parts-cost-input {
    flex: 1 1 110px;
    min-width: 0;
    max-width: 140px;
}

.device-parts-cell .parts-button {
    flex: 0 0 auto;
}

.device-parts-cell .parts-cost-input,
.device-parts-cell .parts-button,
.device-location-select-wrap select {
    margin: 0;
}

.device-labor-cell {
    position: relative;
}

.labor-field {
    display: flex;
    width: 100%;
    align-items: center;
}

.labor-field .labor-cost-input,
.labor-field select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 190px;
    box-sizing: border-box;
    margin: 0;
}

.device-print-cell .icon-button.print-button {
    width: 100%;
    max-width: 160px;
    justify-content: center;
}

@media (max-width: 900px) {
    .device-table {
        border-radius: 18px;
    }

    .device-table thead {
        display: none;
    }

    .device-table tbody {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .device-table tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--device-border);
        border-radius: 18px;
        overflow: hidden;
        background: linear-gradient(140deg, rgba(12, 20, 34, 0.92), rgba(10, 22, 38, 0.86));
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    }

    .device-table tbody td {
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-bottom: none;
        padding: 16px 18px;
    }

    .device-table tbody td + td {
        border-top: 1px solid var(--device-border);
    }

    .device-field-label {
        display: block;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        color: rgba(192, 211, 241, 0.7);
    }

    .device-info-wrap {
        gap: 6px;
    }

    .device-info-title {
        font-size: 1rem;
    }

    .device-location-select-wrap {
        max-width: none;
    }

    .device-location-select-wrap select,
    .device-parts-cell .parts-cost-input,
    .device-labor-cell .labor-cost-input {
        width: 100%;
    }

    .device-parts-cell .parts-field,
    .labor-field {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .device-parts-cell .parts-button,
    .device-print-cell .icon-button.print-button {
        width: 100%;
        max-width: none;
        justify-content: center;
    }

    .device-table tbody td.device-info-cell {
        padding-top: 20px;
    }

    .device-table tbody td.device-print-cell {
        border-top: 1px solid rgba(78, 163, 255, 0.25);
        padding-bottom: 20px;
    }
}

.footer {
    color: #aaa;
    font-size: 0.9em;
    text-align: center;
    background: #000;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}


/* Store grid styling */
.store-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.store-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
    width: 200px;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.store-icon {
    font-size: 80px;
    color: var(--accent);
    margin-bottom: 10px;
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.store-card h4 {
    margin: 0 0 10px 0;
    color: var(--accent);
}

.store-card .button {
    margin-top: 5px;
}

.store-card form {
    margin-top: 10px;
}

/* Administrator panel styling */
.admin-panel {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.admin-panel h2 {
    margin-top: 0;
    color: var(--accent);
}

.welcome {
    font-weight: bold;
    margin-bottom: 20px;
}

.success {
    color: var(--accent);
}

.error {
    color: #ff4d4f;
}
.error-banner {
    margin-bottom: 10px;
}
.step-error {
    color: #ff4d4f;
    margin-bottom: 10px;
}
.device-limit-message {
    color: #ff4d4f;
    margin-top: 5px;
    display: none;
}
.input-error {
    border-color: #ff4d4f !important;
}
.card-container.input-error {
    box-shadow: 0 0 0 2px #ff4d4f;
    border-radius: 8px;
    padding: 5px;
}
.validation-message {
    color: #ff4d4f;
    margin: 10px 0;
    font-weight: bold;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
.shake {
    animation: shake 0.3s;
}
.large-textarea {
    width: 100%;
    height: 150px;
    font-size: 1.1em;
}
.terms-text {
    text-align: left;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    margin-bottom: 10px;
}
.review-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: var(--card-bg);
}
#signaturePad {
    background: #fff;
    border: 1px solid var(--border-color);
}

.add-store-form {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
}

.add-store-form label {
    display: block;
    margin: 10px 0 5px;
}

.add-store-form input {
    width: 100%;
}
/* Login form styling */
.login-container {
    width: 100%;
    max-width: 420px;
    margin: 0;
    background: rgba(26, 36, 54, 0.92);
    padding: 36px 32px;
    border-radius: 22px;
    text-align: left;
    box-shadow: 0 28px 60px rgba(4, 10, 24, 0.55);
    border: 1px solid rgba(78, 163, 255, 0.18);
    backdrop-filter: blur(6px);
}

.login-container .login-icon {
    text-align: center;
    margin-bottom: 18px;
    color: rgba(96, 165, 250, 0.85);
}

.login-container h2 {
    margin-top: 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.login-container label {
    display: grid;
    gap: 6px;
    margin: 0 0 18px;
    font-size: 0.95rem;
    font-weight: 600;
}

.login-container input {
    width: 100%;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.85);
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-container button {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: 999px;
    font-size: 1.05rem;
}

.login-container .login-title {
    text-align: center;
    margin: 0 0 12px;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.login-container input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.75);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
    background: rgba(30, 41, 59, 0.95);
}

@media (max-width: 600px) {
    body.login-page .container {
        padding: clamp(18px, 8vh, 32px) clamp(14px, 6vw, 22px);
    }
    .login-container {
        padding: 28px 22px;
        border-radius: 18px;
        box-shadow: 0 18px 40px rgba(4, 10, 24, 0.45);
    }
    .login-container .login-title {
        font-size: 1.85rem;
    }
    .login-container .login-icon i {
        font-size: 3.5rem;
    }
}

@media (max-height: 720px) {
    body.login-page .container {
        padding: clamp(12px, 6vh, 24px) clamp(14px, 6vw, 22px);
    }
    .login-container {
        padding: 24px 20px;
    }
    .login-container .login-title {
        font-size: 1.65rem;
    }
    .login-container .login-icon i {
        font-size: 3.1rem;
    }
    .login-container h2 {
        font-size: 1.15rem;
        margin-bottom: 12px;
    }
}

@media (min-width: 1024px) {
    body.login-page .container {
        padding: 72px 40px;
    }
    .login-container {
        padding: 44px 40px;
    }
}

/* Configuration experience styling */
.config-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
    text-align: left;
}

.config-hero {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.35), rgba(12, 63, 38, 0.65));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}

.config-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(15, 104, 255, 0.45), transparent 55%);
    pointer-events: none;
}

.config-hero-text {
    position: relative;
    z-index: 1;
}

.config-hero-text h1 {
    margin: 0;
    font-size: 2.2rem;
    letter-spacing: 0.02em;
}

.config-hero-text p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.78);
    max-width: 640px;
    line-height: 1.5;
}

.config-hero-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
}

.meta-item {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 14px 18px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.meta-item .meta-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.meta-item .meta-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.meta-item .meta-help {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
}

.meta-item:hover {
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.meta-item.muted {
    background: rgba(255, 255, 255, 0.08);
    border-style: dashed;
    color: rgba(255, 255, 255, 0.7);
}

.config-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 500;
    backdrop-filter: blur(6px);
}

.config-alert i {
    font-size: 1.1rem;
}

.config-alert.success {
    color: #8be28b;
    border-color: rgba(139, 226, 139, 0.35);
    background: rgba(16, 124, 16, 0.18);
}

.config-alert.error {
    color: #ff8f8f;
    border-color: rgba(255, 79, 79, 0.35);
    background: rgba(155, 31, 31, 0.22);
}

.config-section-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-title {
    margin: 0;
    font-size: 1.7rem;
}

.section-description {
    margin: 0;
    color: #bfc3d6;
    max-width: 720px;
    line-height: 1.5;
}

.config-form {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    margin: 0;
    max-width: none;
}

.config-form-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.config-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.config-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.config-card-icon {
    background: var(--accent);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 12px 30px rgba(14, 122, 13, 0.45);
    flex-shrink: 0;
}

.config-card-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.config-card-header p {
    margin: 4px 0 0;
    color: #bfc3d6;
}

.branding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.branding-field {
    background: rgba(15, 22, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.branding-field__title {
    margin: 0;
    font-size: 1.05rem;
}

.branding-field__hint {
    margin: 0;
    color: #bfc3d6;
    font-size: 0.9rem;
}

.branding-field__status {
    margin: 0;
    font-size: 0.85rem;
    color: #9ba3c3;
}

.branding-field__status--custom {
    color: #7be7a0;
}

.branding-preview {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.branding-preview img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.branding-field__meta {
    margin: 0;
    font-size: 0.8rem;
    color: #9ba3c3;
}

.branding-remove {
    margin-top: auto;
}

.config-maintenance-tools {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.config-maintenance-tools h4 {
    margin: 0;
    font-size: 1.1rem;
}

.config-maintenance-tools p {
    margin: 0;
}

.config-maintenance-tools .db-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.config-maintenance-tools .config-field {
    flex: 1 1 260px;
}

.config-maintenance-tools .config-inline-feedback {
    flex: 1 1 280px;
}

.config-maintenance-tools .ghost-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.config-issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.config-issue-list li {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    line-height: 1.5;
}

.config-grid {
    display: grid;
    gap: 18px;
}

.config-grid.two-col {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9da4b8;
}

.config-field input,
.config-field select,
.config-field textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.config-field textarea {
    min-height: 120px;
    resize: vertical;
}

.config-field input:focus,
.config-field select:focus,
.config-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(14, 122, 13, 0.35);
    outline: none;
}

.config-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-weight: 500;
}

.config-checkbox:hover {
    border-color: var(--accent);
    background: rgba(14, 122, 13, 0.12);
}

.config-checkbox input {
    width: auto;
    accent-color: var(--accent);
}

.config-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.config-card-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ghost-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.qr-preview-card {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.qr-preview-canvas {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.2);
    max-width: 240px;
    width: 100%;
    height: auto;
}

.qr-preview-meta {
    flex: 1;
    min-width: 220px;
}

.qr-link-label {
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: #64748b;
}

.qr-link-value {
    margin: 0 0 12px;
    font-weight: 600;
    word-break: break-word;
}

.qr-link-value a {
    color: #2563eb;
}

.qr-print-status {
    margin: 0 0 12px;
    color: #475569;
}

.qr-guidelines {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 0.95rem;
}

.qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.qr-actions .ghost-button.success {
    background: #22c55e;
    border-color: #16a34a;
    color: #0f172a;
}

.ghost-button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.config-inline-feedback {
    min-height: 24px;
    font-size: 0.9rem;
    color: #c7c7c7;
}

.config-inline-feedback.success,
.success {
    color: #8be28b;
}

.config-inline-feedback.error,
.error {
    color: #ff8f8f;
}

.config-inline-feedback.info,
.info {
    color: #6eb8ff;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.sticky-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.92) 45%, rgba(26, 26, 26, 1) 100%);
    padding-top: 12px;
}

.primary-action {
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow: 0 18px 40px rgba(14, 122, 13, 0.35);
}

.primary-action:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.config-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 24px 28px;
    color: #d4d4d4;
}

.config-empty i {
    font-size: 1.6rem;
    color: #ffd166;
}

.config-hint {
    color: #9fb5ff;
    margin: 0;
}

.config-hint strong {
    color: #fff;
}

.config-hint.subtle {
    color: #cdd9ff;
    font-size: 0.9rem;
    margin-top: 8px;
}

.placeholder-list.modern {
    columns: 2;
    column-gap: 28px;
    padding-left: 18px;
    margin: 0;
    color: #d4d4d4;
}

.placeholder-list.modern li {
    margin: 4px 0;
    break-inside: avoid;
}

.status-collection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-dropdown {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

.status-dropdown summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}

.status-dropdown summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform 0.2s ease;
}

.status-dropdown[open] summary::after {
    transform: rotate(180deg);
}

.status-dropdown summary::-webkit-details-marker {
    display: none;
}

.status-dropdown .status-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(0, 0, 0, 0.2);
}

.config-select {
    width: 100%;
}

.table-scroll {
    overflow-x: auto;
    margin-top: 8px;
}

.label-config-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

.label-config-table th,
.label-config-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.label-config-table th {
    font-weight: 600;
    color: #cfd3ff;
    background: rgba(255, 255, 255, 0.04);
}

.label-config-table tr:last-child td {
    border-bottom: none;
}

.label-config-table input[type="number"] {
    width: 80px;
    margin: 0 4px;
    padding: 8px;
}

.config-back-links {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.config-back-links .back-link {
    text-decoration: none;
}

@media (max-width: 768px) {
    .config-hero {
        padding: 24px;
    }

    .config-hero-text h1 {
        font-size: 1.8rem;
    }

    .config-card {
        padding: 20px;
    }

    .config-grid.two-col {
        grid-template-columns: 1fr;
    }

    .sticky-actions {
        position: static;
        background: transparent;
        padding-top: 0;
    }

    .form-actions {
        justify-content: flex-start;
    }

    .config-back-links {
        justify-content: flex-start;
    }
}

.save-reminder-banner {
    background: #0d6efd;
    color: #fff;
    margin: -20px -20px 20px -20px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-align: left;
    font-weight: 600;
    overflow: hidden;
    max-height: 0;
}

.save-reminder-banner.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    max-height: 200px;
}

.save-reminder-banner .banner-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.save-reminder-banner .banner-save-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.save-reminder-banner .banner-save-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.save-reminder-banner .banner-save-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.full-width-textarea {
    width: 100%;
    resize: vertical;
}

.detail-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: left;
}

@media (max-width:500px) {
    body { padding:10px; }
    .header { margin:-10px -10px 20px -10px; }
    .store-card { width:100%; }
    .modal-header__label { display: none; }
}

/* Modal styling */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal-content {
    background: var(--card-bg);
    width: 90%;
    height: 90%;
    max-width: none;
    max-height: none;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.message-modal {
    display: none;
    align-items: center;
    justify-content: center;
}

.message-modal__content {
    width: min(420px, 92vw);
    max-width: 420px;
    height: auto;
    max-height: 90vh;
    padding: 28px 24px 24px;
    display: grid;
    gap: 18px;
    box-sizing: border-box;
    outline: none;
    position: relative;
}

.message-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
}

.message-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-modal__icon {
    font-size: 1.75rem;
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-modal[data-tone="error"] .message-modal__icon {
    color: #f87171;
}

.message-modal[data-tone="success"] .message-modal__icon {
    color: #34d399;
}

.message-modal__title {
    margin: 0;
    font-size: 1.3rem;
}

.message-modal__message {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.message-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.message-modal__ack {
    min-width: 96px;
}

.pending-modal {
    padding: 16px;
    overflow-x: hidden;
}

body.pending-modal-open {
    overflow: hidden;
}

.pending-modal .modal-content {
    width: min(520px, calc(100vw - 32px));
    max-width: min(520px, calc(100vw - 32px));
    height: auto;
    max-height: 90vh;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
    overflow-x: hidden;
    margin: 0 auto;
}

.pending-modal__body {
    flex: 1;
    display: grid;
    gap: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pending-modal__body::-webkit-scrollbar {
    display: none;
}

.pending-modal__title {
    margin: 0;
    font-size: 1.35rem;
}

.pending-modal__meta {
    display: grid;
    gap: 6px;
    font-size: 0.95rem;
    background: rgba(15, 23, 42, 0.65);
    padding: 14px;
    border-radius: 12px;
    overflow-wrap: anywhere;
}

.pending-modal__meta strong {
    color: #fff;
}

.pending-meta__contact {
    font-size: 0.9rem;
    color: rgba(203, 213, 225, 0.9);
}

.pending-submitted {
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.9);
}

.pending-comment {
    margin-top: 6px;
    color: rgba(226, 232, 240, 0.95);
    white-space: pre-wrap;
}

.pending-modal__form {
    display: grid;
    gap: 12px;
    max-width: 100%;
}

.pending-field {
    display: grid;
    gap: 6px;
    max-width: 100%;
}

.pending-field label {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.95);
    max-width: 100%;
}

.pending-field input,
.pending-field textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.4);
    color: #fff;
    box-sizing: border-box;
}

.pending-field input:focus,
.pending-field textarea:focus {
    outline: 2px solid rgba(96, 165, 250, 0.65);
    outline-offset: 1px;
}

.pending-field--comments textarea {
    min-height: 96px;
    resize: vertical;
}

.pending-modal__devices {
    display: grid;
    gap: 10px;
    max-width: 100%;
}

.pending-modal__device {
    background: rgba(15, 23, 42, 0.55);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    overflow-wrap: anywhere;
}

.pending-device__serial {
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.8);
    margin-top: 4px;
}

.pending-modal__status {
    font-size: 0.85rem;
    border-radius: 8px;
    padding: 8px 12px;
    background: rgba(148, 163, 184, 0.15);
    color: rgba(226, 232, 240, 0.95);
}

.pending-modal__status[hidden] {
    display: none;
}

.pending-modal__status.is-active {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
}

.pending-modal__status.is-success {
    background: rgba(34, 197, 94, 0.2);
    color: #bbf7d0;
}

.pending-modal__status.is-error {
    background: rgba(239, 68, 68, 0.24);
    color: #fecaca;
}

.pending-modal__spinner {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 8px;
    border-radius: 50%;
    border: 2px solid rgba(191, 219, 254, 0.6);
    border-top-color: rgba(191, 219, 254, 0.15);
    animation: pending-spinner 0.75s linear infinite;
    vertical-align: middle;
}

.pending-modal__status.is-error .pending-modal__spinner {
    border-color: rgba(254, 202, 202, 0.8);
    border-top-color: rgba(254, 202, 202, 0.25);
}

@keyframes pending-spinner {
    to {
        transform: rotate(360deg);
    }
}

.pending-modal__reason {
    display: grid;
    gap: 8px;
    font-size: 0.9rem;
    max-width: 100%;
}

.pending-modal__reason[hidden] {
    display: none;
}

.pending-modal__reason textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.4);
    color: #fff;
    box-sizing: border-box;
    overflow-x: hidden;
}

.pending-modal__reason-actions {
    display: flex;
    justify-content: flex-end;
}

.pending-modal__reason-actions .button {
    font-size: 0.85rem;
    padding: 6px 12px;
}


.pending-modal__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pending-modal__actions-group {
    display: flex;
    gap: 10px;
}

.pending-modal__actions #pendingApprove {
    font-size: 1rem;
    padding: 12px 26px;
    font-weight: 600;
}

.pending-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 18px 32px rgba(29, 78, 216, 0.35);
    cursor: pointer;
    z-index: 1100;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pending-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 36px rgba(29, 78, 216, 0.45);
}

.pending-fab__icon i {
    font-size: 1.1rem;
}

.pending-fab__count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.pending-list-modal .modal-content {
    width: 480px;
    max-width: 95%;
    height: auto;
    max-height: 85vh;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pending-list-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pending-list-modal__title {
    margin: 0;
    font-size: 1.25rem;
}

.pending-list-modal__body {
    display: grid;
    gap: 16px;
    overflow-y: auto;
    max-height: 65vh;
}

.pending-list-modal__description {
    margin: 0;
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.95rem;
}

.pending-list {
    display: grid;
    gap: 12px;
}

.pending-list__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.pending-list__item:hover {
    border-color: rgba(59, 130, 246, 0.65);
    background: rgba(30, 64, 175, 0.45);
}

.pending-list__item.is-active {
    border-color: rgba(59, 130, 246, 0.9);
    background: rgba(30, 64, 175, 0.6);
}

.pending-list__item:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.pending-list__info {
    display: grid;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.pending-list__name {
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-list__meta {
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.85);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pending-list__time {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.9);
    white-space: nowrap;
}

.pending-list__empty {
    text-align: center;
    padding: 24px;
    border-radius: 10px;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    color: rgba(148, 163, 184, 0.9);
}

@media (max-width: 600px) {
    .pending-fab {
        left: 16px;
        right: 16px;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .modal {
        padding: 12px;
        align-items: flex-start;
    }

    .modal-content {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 24px);
        border-radius: 12px;
    }

    .pending-modal {
        padding: 12px;
    }

    .pending-modal .modal-content {
        width: min(520px, calc(100vw - 24px));
        max-width: min(520px, calc(100vw - 24px));
        min-height: auto;
    }

    #statusModal .modal-content,
    #paymentModal .modal-content,
    #partsModal .modal-content,
    #detailsModal .modal-content {
        width: 100%;
        max-width: 100%;
    }

    #statusModal .modal-section {
        max-height: none;
    }
}

@media (max-width: 520px) {
    .modal {
        padding: 0;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    .pending-modal {
        padding: 8px;
    }

    .pending-modal .modal-content {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        min-height: auto;
    }
}

body.mobile .modal {
    padding: 12px;
    align-items: flex-start;
    box-sizing: border-box;
}

body.mobile .modal-content {
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 24px);
}

body.mobile .pending-modal {
    padding: 12px;
}

body.mobile .pending-modal .modal-content {
    width: min(520px, calc(100vw - 24px));
    max-width: min(520px, calc(100vw - 24px));
    min-height: auto;
}

@media (max-width: 520px) {
    body.mobile .pending-modal {
        padding: 8px;
    }

    body.mobile .pending-modal .modal-content {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }
}

body.mobile #statusModal .modal-section {
    max-height: none;
}

body.mobile .modal-actions {
    padding: 16px;
}

body.mobile .modal-actions .button {
    flex: 1 1 100%;
    min-width: 0;
}

.modal-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.98) 0%, rgba(32, 32, 32, 0.95) 100%);
    border-bottom: 1px solid var(--border-color);
    z-index: 5;
}

.modal-header__label {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.modal-close-button {
    font-size: 1.6em;
    line-height: 1;
    padding: 4px 8px;
}

.modal-close-button span {
    display: block;
    line-height: 1;
}

.modal-content .close {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}
.modal-content .print-report-button {
    position: absolute;
    right: 50px;
    top: 8px;
    color: #fff;
    cursor: pointer;
}

.modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Ticket details / invoice layout */
#detailsModal .modal-content {
    max-width: 800px;
    width: 90%;
    height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#detailsModal .modal-header {
    position: sticky;
    top: 0;
}

#detailsModal .modal-header .print-report-button,
#detailsModal .modal-header .close {
    position: static;
    color: var(--text-color);
}

#detailsModal .modal-header .print-report-button:hover,
#detailsModal .modal-header .close:hover {
    color: #fff;
}

#detailsModal .modal-header .close {
    font-size: 1.6em;
}

#detailsModal .modal-body-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#detailsModal .modal-body-scroll {
    height: auto;
}

#paymentModal .modal-content {
    width: 400px;
    max-width: 95%;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
}

.photo-modal .modal-content {
    width: 620px;
    max-width: 95%;
    height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.photo-modal__body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--card-background, #1f2933);
}

.photo-status {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    font-weight: 500;
    white-space: pre-wrap;
}

.photo-status--error {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.photo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.photo-empty {
    margin: 0;
    padding: 24px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.photo-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.photo-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.photo-name {
    font-weight: 600;
    color: #fff;
}

.photo-details {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
}

.photo-actions {
    display: flex;
    align-items: center;
}

.photo-upload-form {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.photo-upload-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.photo-upload-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.photo-upload-actions .button {
    flex: 0 0 auto;
}

.photo-button {
    position: relative;
}

.photo-button--has-photos::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 4px rgba(46, 204, 113, 0.6);
}

#photoModal .icon-button.photo-delete {
    color: rgba(255, 255, 255, 0.7);
}

#photoModal .icon-button.photo-delete:hover {
    color: #ff7675;
}

@media (max-width: 680px) {
    .photo-modal .modal-content {
        width: 100%;
    }

    .photo-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .photo-thumb {
        width: 100%;
        height: 180px;
    }

    .photo-upload-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .photo-upload-actions .button {
        width: 100%;
    }
}

#partsModal .modal-content {
    width: min(720px, calc(100vw - 40px));
    max-width: 95%;
    height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.parts-modal__container {
    padding: 0;
    flex: 1 1 auto;
}

.parts-modal__container.modal-body-scroll {
    overflow-y: auto;
}

.parts-modal__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.parts-modal__section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.parts-modal__section--search {
    border-style: dashed;
}

.parts-modal__section-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.parts-modal__heading {
    font-size: 1.15rem;
    margin: 0;
}

.parts-modal__subheading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.parts-modal__hint {
    color: #bfc4d1;
    font-size: 0.9rem;
    margin: 0;
}

.parts-modal__table {
    width: 100%;
    border-collapse: collapse;
}

.parts-modal__table th,
.parts-modal__table td {
    text-align: left;
}

.parts-modal__table input[type="number"] {
    width: 90px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
}

.parts-modal__empty-row td {
    text-align: center;
    color: #aeb3c0;
    padding: 14px;
}

.parts-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.parts-modal__add-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.parts-modal__results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.parts-modal__results-table {
    width: 100%;
}

.parts-modal__results-table th,
.parts-modal__results-table td {
    vertical-align: middle;
}

.parts-modal__result-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.parts-modal__qty-input {
    width: 72px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
}

.parts-modal__result-add {
    padding: 6px 12px;
}

.parts-modal__search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.parts-modal__search-input input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
}

.parts-modal__create {
    border-top: 1px solid var(--border-color);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.parts-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.parts-modal__form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.parts-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.parts-modal__field-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.parts-modal__field input {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
}

.parts-modal__calculated {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    font-weight: 600;
    text-align: right;
}

.parts-modal__form-actions {
    display: flex;
    justify-content: flex-end;
}

.parts-modal__status {
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(30, 180, 120, 0.18);
    color: #b4ffdb;
}

.parts-modal__status.is-error {
    background: rgba(220, 40, 70, 0.22);
    color: #ffc1d0;
}

.parts-modal__loading,
.parts-modal__empty {
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #bfc4d1;
}

.parts-modal__close-search {
    align-self: flex-start;
}

.parts-modal__result-add.button {
    min-width: 0;
}

#partsModal .modal-header {
    padding: 20px 24px 0;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

#partsModal .modal-body-content {
    padding: 0;
}

#partsModal .modal-title {
    margin: 0;
    color: var(--accent);
    font-size: 1.35rem;
}

#partsModal .modal-header .close {
    position: static;
    color: var(--text-color);
}

#partsModal .modal-header .close:hover {
    color: var(--accent-hover);
}

#statusModal .modal-content {
    width: 500px;
    max-width: 95%;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#statusModal .modal-section {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-body-content {
    padding: 20px;
}
.modal-body-scroll {
    overflow: auto;
    height: 100%;
}
.modal-form-body {
    text-align: left;
}
.modal-actions {
    padding: 10px 20px 20px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.status-progress {
    display: none;
    text-align: center;
}
.modal-actions .button {
    min-width: 120px;
}

@media (max-width: 520px) {
    .modal-actions {
        padding: 16px;
    }

    .modal-actions .button {
        flex: 1 1 100%;
        min-width: 0;
    }
}
.hidden-block {
    display: none;
}
.reports-dashboard {
    text-align: center;
    padding-bottom: 20px;
}
.reports-dashboard h2,
.reports-dashboard h3 {
    color: var(--accent);
}
.global-date-filter {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.filter-buttons {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.filter-buttons .btn {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background: transparent;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
}
.filter-buttons .btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}
.filter-buttons .btn.active-filter {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.report-selection {
    margin-top: 20px;
}
.report-option {
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 20px;
    margin: 10px;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    background: var(--card-bg);
}
.report-option:hover {
    background: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    color: #fff;
}
.report-option p {
    margin: 0;
    font-weight: bold;
}
.report-icon {
    font-size: 48px;
    margin-bottom: 10px;
    color: var(--accent);
}
.report-option:hover .report-icon {
    color: #fff;
}
.report-panel {
    display: none;
    position: relative;
    margin-top: 20px;
}
.report-panel.active-panel {
    display: block;
}
.print-btn,
.close-btn {
    margin: 5px;
}
.limit-dropdown {
    margin: 15px 0;
}
.report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: rgba(33, 33, 33, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

.report-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.report-toolbar__actions .btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.report-toolbar__actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
    background: rgba(29, 185, 84, 0.18);
}

.report-toolbar__actions .btn.btn-secondary {
    background: rgba(29, 185, 84, 0.18);
    border-color: rgba(29, 185, 84, 0.45);
}

.report-toolbar__actions .btn.btn-secondary:hover {
    background: rgba(29, 185, 84, 0.26);
}

.report-toolbar__actions .btn.btn-danger {
    background: rgba(220, 53, 69, 0.22);
    border-color: rgba(220, 53, 69, 0.45);
}

.report-toolbar__actions .btn.btn-danger:hover {
    background: rgba(220, 53, 69, 0.3);
}

.report-toolbar__limit {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 180px;
}

.report-toolbar__limit label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
}

.report-toolbar__select {
    position: relative;
    width: 100%;
}

.report-toolbar__select select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 10px 40px 10px 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.report-toolbar__select select:focus {
    outline: none;
    border-color: rgba(29, 185, 84, 0.55);
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.18);
}

.revenue-report__hero {
    margin-top: 24px;
    padding: 26px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.24), rgba(16, 91, 158, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 36px rgba(5, 20, 10, 0.45);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.revenue-report__logo {
    flex-shrink: 0;
    max-width: 200px;
}

.revenue-report__logo img {
    display: block;
    max-height: 80px;
    width: auto;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(5, 20, 10, 0.35);
}

.revenue-report__title h2 {
    margin: 0;
    font-size: 1.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.revenue-report__title h2 i {
    font-size: 1.4em;
}

.revenue-report__range {
    margin: 6px 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
}

.revenue-report__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.revenue-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.revenue-summary-grid {
    margin-top: 26px;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.revenue-summary-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.revenue-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 36px rgba(0, 0, 0, 0.35);
}

.revenue-summary-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(29, 185, 84, 0.18);
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.revenue-summary-card__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
}

.revenue-summary-card__value {
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.revenue-summary-card--accent {
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.45), rgba(16, 120, 214, 0.35));
    border-color: transparent;
}

.revenue-summary-card--accent .revenue-summary-card__label {
    color: rgba(255, 255, 255, 0.82);
}

.revenue-summary-card--accent .revenue-summary-card__value {
    color: #fff;
}

.revenue-summary-card--accent .revenue-summary-card__icon {
    background: rgba(0, 0, 0, 0.28);
}

.revenue-note-card {
    margin-top: 26px;
    padding: 22px;
    border-radius: 18px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
}

.revenue-note-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.revenue-note-card__body h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.92);
}

.revenue-note-card__body p {
    margin: 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
}

.revenue-note-card.is-muted .revenue-note-card__icon {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.revenue-note-card.is-success {
    border-color: rgba(29, 185, 84, 0.45);
    background: rgba(29, 185, 84, 0.18);
}

.revenue-note-card.is-success .revenue-note-card__icon {
    background: rgba(29, 185, 84, 0.28);
    color: #b8ffce;
}

.revenue-note-card.is-alert {
    border-color: rgba(220, 53, 69, 0.55);
    background: rgba(220, 53, 69, 0.18);
}

.revenue-note-card.is-alert .revenue-note-card__icon {
    background: rgba(220, 53, 69, 0.28);
    color: #ffd0d5;
}

.revenue-metrics-card {
    margin-top: 26px;
    padding: 24px;
    border-radius: 20px;
    background: rgba(32, 32, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.35);
    text-align: left;
}

.revenue-metrics-card h3 {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92);
}

.revenue-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.revenue-metric {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.revenue-metric:hover {
    transform: translateY(-3px);
    border-color: rgba(29, 185, 84, 0.45);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3);
}

.revenue-metric__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.62);
}

.revenue-metric__value {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.revenue-metric__hint {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.revenue-table-card {
    margin-top: 30px;
    border-radius: 20px;
    background: rgba(26, 26, 26, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 44px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    text-align: left;
}

.revenue-table-card__header {
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.22), rgba(16, 91, 158, 0.22));
}

.revenue-table-card__header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
}

.revenue-table-card__header p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.revenue-table-container {
    overflow-x: auto;
}

.revenue-table thead th {
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
}

.revenue-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.revenue-table tbody tr:hover {
    background: rgba(29, 185, 84, 0.14);
}

.revenue-table tbody td {
    font-size: 0.9rem;
}
.table-container {
    overflow-x: auto;
    width: 100%;
}
.open-ticket {
    color: #ff8080;
    font-weight: bold;
}
.report-summary {
    margin: 15px 0;
}
.summary-card .card {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}
.summary-card .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.summary-card.compact .card-body {
    padding: 0.75rem;
}
.summary-card.compact .card-title {
    font-size: 0.95rem;
}
.summary-card.compact .card-text {
    font-size: 0.9rem;
}
.summary-card.compact.highlight-card {
    background: linear-gradient(135deg,#e53935,#d32f2f);
    color: #fff;
}

#statusPreviewContent .preview-item {
    margin-bottom: 15px;
}

#statusPreviewContent .preview-text {
    background: var(--card-bg);
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#statusPreviewContent .empty-preview {
    background: rgba(255,255,255,0.05);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 14px;
    text-align: left;
    line-height: 1.4;
}

#statusPreviewContent h4 {
    margin-bottom: 6px;
}

#statusProgress .progress-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#statusProgress .progress-item i {
    margin-right: 8px;
}

#statusProgress .progress-item.success i { color: #107C10; }
#statusProgress .progress-item.error i { color: #DC143C; }

#partsModal h2 {
    margin: 0;
}

@media (max-width: 640px) {
    .parts-modal__body {
        padding: 20px;
    }

    .parts-modal__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .parts-modal__actions .button {
        width: 100%;
    }

    .parts-modal__form-grid {
        grid-template-columns: 1fr;
    }

    .parts-modal__result-controls {
        justify-content: flex-start;
    }
}

#detailsModal .invoice-header {
    text-align: center;
    margin-bottom: 20px;
}

#detailsModal .invoice-section {
    margin-bottom: 15px;
    text-align: left;
}

#detailsModal .invoice-section h4 {
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

#detailsModal table.invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#detailsModal table.invoice-table th,
#detailsModal table.invoice-table td {
    border: 1px solid var(--border-color);
    padding: 6px;
    text-align: left;
}

#detailsModal table.summary-table {
    width: 60%;
    margin: 0 auto;
    border-collapse: collapse;
}

#detailsModal table.summary-table th,
#detailsModal table.summary-table td {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
}
#detailsModal table.summary-table th {
    text-align: left;
}
#detailsModal table.summary-table td {
    text-align: right;
}
#detailsModal .signature-placeholder {
    width: 300px;
    height: 150px;
    border: 1px dashed var(--border-color);
    background: #fff;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
}

#detailsModal .signature-section {
    text-align: center;
}

#detailsModal .signature-section img {
    max-width: 300px;
    border: 1px solid #fff;
}


.icon-button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.1em;
    margin: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.icon-button:hover {
    color: #fff;
}
.icon-button:focus-visible {
    outline: 2px solid rgba(29, 185, 84, 0.7);
    outline-offset: 2px;
}
.icon-button:disabled {
    color: #555;
    cursor: not-allowed;
}
.icon-button.delete-button {
    background: none;
    padding: 0;
    color: #ff4d4f;
}
.icon-button.delete-button:hover {
    background: none;
    color: #ff6f71;
}
.icon-button.edit-button {
    background: none;
    padding: 0;
    color: #888;
}
.icon-button.edit-button:hover {
    background: none;
    color: #bbb;
}
.icon-button.payment-button {
    color: var(--accent);
    background: var(--card-bg);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.icon-button.payment-button:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
    background: #3a3a3a;
}
.icon-button.payment-button:disabled {
    color: #777;
    border-color: #777;
    background: #444;
}
.payment-cell {
    text-align: center;
}

.payment-cell .payment-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.payment-cell .payment-controls .payment-button {
    margin: 0;
}

.payment-status--paid {
    color: #2ecc71;
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
}
.actions-cell {
    text-align: center;
}
.payment-info {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 15px; /* space below table for form elements */
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.payment-info th,
.payment-info td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
#payTotal {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
}
.icon-button.print-button {
    color: rgba(194, 208, 232, 0.78);
    background: rgba(12, 20, 32, 0.65);
    border: 1px solid var(--device-border);
}
.icon-button.print-button:hover {
    color: #fff;
    background: rgba(24, 40, 62, 0.85);
}
.icon-button.parts-button {
    color: var(--device-accent);
    border: 1px solid var(--device-border);
    background: rgba(12, 20, 32, 0.7);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(10, 16, 26, 0.35);
}
.icon-button.parts-button:hover {
    background: rgba(24, 40, 62, 0.9);
    color: #fff;
}
.parts-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.parts-field input[readonly] {
    background: rgba(8, 16, 28, 0.82);
    border: 1px solid var(--device-border);
    color: rgba(222, 235, 255, 0.88);
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#partSearchSection {
    margin-top: 10px;
}
#partSearchSection table {
    margin-top: 5px;
}
/* Kiosk form styles */
.kiosk-branding {
    text-align: center;
    margin: 0 auto 24px;
    max-width: 360px;
}

.kiosk-branding__logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.kiosk-branding__logo {
    max-width: 200px;
    max-height: 72px;
    width: auto;
    height: auto;
    display: block;
}

.kiosk-branding__logo--admin {
    max-width: 220px;
}

.kiosk-branding__logo--store {
    max-width: 180px;
}

.kiosk-branding__tagline {
    margin: 0;
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
}

.progressbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.kiosk-page #submitBtn {
    display: none;
}
.kiosk-page #reviewModal {
    display: none;
}
.kiosk-page .review-modal-body {
    padding: 20px;
    overflow: auto;
    max-width: 600px;
    width: 100%;
    height: auto;
}
.saved-devices-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.saved-devices-panel__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
}
.saved-devices-panel__description {
    margin: 6px 0 16px;
    color: #475569;
    font-size: 0.95rem;
}
.saved-devices-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.saved-device-chip {
    background: #fff;
    color: #1e293b;
    border: 1px solid #cbd5f5;
    border-radius: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.3;
    gap: 4px;
}
.saved-device-chip:hover,
.saved-device-chip:focus {
    background: #e0f2fe;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}
.saved-device-chip__name {
    font-weight: 600;
}
.saved-device-chip__serial {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
}
.saved-devices-panel__dismiss {
    background: #16a34a;
    color: #fff;
    border: 1px solid #15803d;
}
.saved-devices-panel__dismiss:hover,
.saved-devices-panel__dismiss:focus {
    background: #22c55e;
    border-color: #16a34a;
    color: #fff;
}
.kiosk-page .console-options,
.kiosk-page .console-model-group,
.kiosk-page .controller-options,
.kiosk-page .controller-model-group,
.kiosk-page .pc-options,
.kiosk-page .pc-model-group,
.kiosk-page .serial-group {
    display: none;
}
.progress-step {
    flex: 1;
    text-align: center;
    position: relative;
}
.progress-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #666;
    z-index: 0;
}
.step-number {
    width: 32px;
    height: 32px;
    background: #666;
    border-radius: 50%;
    color: #fff;
    line-height: 32px;
    margin: 0 auto 5px;
}
.progress-step.active .step-number,
.progress-step.completed .step-number {
    background: #107C10;
}
.progress-step.completed .step-number::after {
    content: '✔';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
fieldset { display: none; border: 0; margin: 0; padding: 0; }
fieldset.active { display: block; }
.form-group { margin-bottom: 15px; text-align: center; }
#paymentModal .form-group label { font-size: 1.1em; }
#paymentModal .form-group input { font-size: 1.1em; }
.card-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.card-option { border: 1px solid #fff; border-radius: 8px; padding: 10px 15px; cursor: pointer; }
.card-option.selected { background: #fff; color: #222; }
.device-block { border: 2px solid #107C10; padding: 15px; margin-bottom: 15px; border-radius: 8px; }
.device-block-header { background: #C0C0C0; padding: 8px; display: flex; justify-content: space-between; align-items: center; }
.device-block-header h3 { margin: 0; color: #222; }
.remove-device-btn { background: #DC143C; color: #fff; border: none; border-radius: 4px; padding: 6px 10px; }
.form-footer { text-align: center; margin-top: 20px; }

@keyframes rowGlow {
    from { background-color: #264722; }
    to { background-color: inherit; }
}
.row-glow {
    animation: rowGlow 0.8s ease-out;
}

@keyframes rowErrorFlash {
    from { background-color: #5c1f1f; }
    to { background-color: inherit; }
}
.row-error {
    animation: rowErrorFlash 1.2s ease-out;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .queue-panel table.tickets {
        border-spacing: 0 10px;
    }
    .queue-panel table.tickets tr.ticket-row td {
        padding: 16px 18px;
    }
    .queue-panel table.tickets .toggle-col {
        width: 48px;
    }
}

@media (max-width: 768px) {
    input, button, select, textarea {
        font-size: 1.1em;
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .header { flex-wrap: wrap; }
    .header__logo {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    .header nav { width: 100%; }
    .store-select-form { width: 100%; margin-bottom: 10px; }
    .store-select-form select { width: 100%; margin-left: 0; margin-top: 5px; }
    .nav-toggle { display: block; font-size: 2em; }
    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        width: 100%;
        margin-top: 10px;
        display: none;
    }
    .nav-menu.open { display: flex; }
    .nav-menu > li { margin-left: 0; width: 100%; }
    .nav-menu > li + li { margin-top: 5px; }
    .nav-menu > li > a {
        padding: 12px 14px;
        width: 100%;
        font-size: 1.1em;
    }

    /* dropdown accordion behavior */
    .dropdown-content {
        position: static;
        width: 100%;
        border: none;
        display: block;
        max-height: 0;
        overflow: hidden;
        padding-left: 20px;
        transition: max-height 0.3s ease-out;
    }
    .dropdown.open > .dropdown-content {
        max-height: 500px;
    }
    .dropdown:hover > .dropdown-content {
        display: block;
    }
    table.tickets { display: block; overflow-x: auto; }
}
@media (max-width: 480px) {
    .nav-toggle { font-size: 2.4em; }
    .nav-menu > li > a {
        padding: 16px 20px;
        font-size: 1.25em;
    }
    input, button, select, textarea {
        font-size: 1.2em;
        padding: 14px;
    }
    label { font-size: 1.1em; }
}


/* Mobile class overrides for wider screens */
body.mobile input, body.mobile button, body.mobile select, body.mobile textarea {
    font-size: 1.1em;
    padding: 12px;
}
body.mobile .header { flex-wrap: wrap; }
body.mobile .header__logo {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}
body.mobile .header nav { width: 100%; }
body.mobile .store-select-form { width: 100%; margin-bottom: 10px; }
body.mobile .store-select-form select { width: 100%; margin-left: 0; margin-top: 5px; }
body.mobile .nav-toggle { display: block; font-size: 2em; }
body.mobile .nav-menu {
    flex-direction: column;
    align-items: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 100%;
    margin-top: 10px;
    display: none;
}
body.mobile .nav-menu.open { display: flex; }
body.mobile .nav-menu > li { margin-left: 0; width: 100%; }
body.mobile .nav-menu > li + li { margin-top: 5px; }
body.mobile .nav-menu > li > a {
    padding: 12px 14px;
    width: 100%;
    font-size: 1.1em;
}
body.mobile .dropdown-content {
    position: static;
    width: 100%;
    border: none;
    display: block;
    max-height: 0;
    overflow: hidden;
    padding-left: 20px;
    transition: max-height 0.3s ease-out;
}
body.mobile .dropdown.open > .dropdown-content { max-height: 500px; }
body.mobile .dropdown:hover > .dropdown-content { display: block; }
body.mobile table.tickets { display: block; overflow-x: auto; }

/* Public ticket view */
body.public-ticket-page {
    background: radial-gradient(120% 120% at 50% 0%, #232323 0%, var(--bg-color) 55%, #0b0b0b 100%);
    color: var(--text-color);
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 40px 20px;
}

body.public-ticket-page .public-ticket-wrapper {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45);
    max-width: 960px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.public-ticket-header {
    background: linear-gradient(135deg, rgba(14, 122, 13, 0.95), rgba(20, 152, 20, 0.85));
    padding: 32px 28px;
    text-align: center;
    position: relative;
}

.public-ticket-brand h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.public-ticket-brand p {
    margin: 8px 0 0;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.ticket-meta-grid {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}

.meta-block {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 18px;
    min-width: 150px;
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.meta-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 4px;
}

.meta-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.meta-value.status {
    text-transform: capitalize;
    color: #e4ffe4;
}

body.public-ticket-page .invoice {
    padding: 32px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

body.public-ticket-page .invoice-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}

body.public-ticket-page .invoice-section h4 {
    margin: 0 0 16px;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

body.public-ticket-page .info-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

body.public-ticket-page .field-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a6a6a6;
    margin-bottom: 4px;
}

body.public-ticket-page .field-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
    word-break: break-word;
}

body.public-ticket-page .body-copy {
    margin: 0;
    line-height: 1.6;
    color: var(--text-color);
}

body.public-ticket-page .empty-state {
    margin: 0;
    color: #9c9c9c;
    font-style: italic;
}

body.public-ticket-page .ticket-photo-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.public-ticket-page .ticket-photo-card {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

body.public-ticket-page .ticket-photo-card__preview {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}

body.public-ticket-page .ticket-photo-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.public-ticket-page .ticket-photo-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
}

body.public-ticket-page .ticket-photo-card__name {
    font-weight: 600;
    color: #fff;
}

body.public-ticket-page .ticket-photo-card__meta {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.section-hint {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.service-note-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
    padding: 24px 26px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(14, 122, 13, 0.28), rgba(14, 122, 13, 0.08));
    border: 1px solid rgba(20, 152, 20, 0.35);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}

.service-note-form::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 55%);
    pointer-events: none;
}

.service-note-form label,
.service-note-label {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #edffe8;
}

.service-note-form textarea,
.service-note-textarea {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 190px;
    resize: vertical;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(237, 255, 232, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.service-note-textarea::placeholder {
    color: rgba(237, 255, 232, 0.65);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.service-note-form textarea:focus,
.service-note-textarea:focus {
    border-color: rgba(237, 255, 232, 0.85);
    box-shadow: 0 0 0 3px rgba(14, 122, 13, 0.35);
    transform: translateY(-1px);
}

.service-note-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.service-note-button {
    padding-inline: 28px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 22px rgba(14, 122, 13, 0.35);
}

.service-note-button:focus-visible {
    outline: 2px solid rgba(237, 255, 232, 0.9);
    outline-offset: 3px;
}

.service-notes-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.note-entry {
    position: relative;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px 18px 22px;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.note-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-left: 4px solid rgba(20, 152, 20, 0.75);
    pointer-events: none;
}

.note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #b7eab7;
    font-weight: 600;
}

.note-body {
    margin-top: 8px;
    line-height: 1.5;
    color: var(--text-color);
}

.note-separator {
    color: rgba(255, 255, 255, 0.4);
}

.note-user {
    color: #e9ffe9;
}

body.public-ticket-page .summary-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    overflow: hidden;
}

body.public-ticket-page .summary-table th,
body.public-ticket-page .summary-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.public-ticket-page .summary-table th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: #b3b3b3;
}

body.public-ticket-page .summary-table td {
    text-align: right;
    font-weight: 600;
    color: #ffffff;
}

body.public-ticket-page .summary-table tr.summary-total th,
body.public-ticket-page .summary-table tr.summary-total td {
    color: var(--accent);
    border-bottom: none;
    font-size: 1.15rem;
}

body.public-ticket-page .detail-card {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
}

body.public-ticket-page .detail-card h4 {
    margin-top: 0;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-size: 0.95rem;
}

.device-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.device-list li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    width: 100%;
    box-sizing: border-box;
}

.device-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.device-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.device-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.device-toggle:hover,
.device-toggle:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.device-toggle-icon {
    line-height: 1;
}

.device-details {
    margin-top: 12px;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 24px;
    width: 100%;
    box-sizing: border-box;
}

.device-entry.is-expanded .device-details {
    display: grid;
}

.device-fields {
    margin: 0;
    display: contents;
}

.device-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
}

.device-field dt {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.device-field dd {
    margin: 0;
    font-weight: 500;
    color: #ffffff;
    font-size: 0.95rem;
}

.device-title {
    font-weight: 600;
    color: #ffffff;
}

.device-serial {
    font-size: 0.85rem;
    color: #99c299;
}

@media (max-width: 720px) {
    .device-list li {
        padding: 14px 16px;
    }

    .device-header {
        align-items: center;
        gap: 12px;
    }

    .device-toggle {
        display: inline-flex;
    }

    .device-summary {
        gap: 2px;
    }

    .device-details {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .device-field {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 12px 14px;
    }

    .device-field dt {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    .device-field dd {
        font-size: 1rem;
    }
}

@media (min-width: 721px) {
    .device-details {
        display: grid;
    }
}

body.public-ticket-page .payments-table {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

body.public-ticket-page .payments-table th {
    background: rgba(255, 255, 255, 0.04);
    color: #d8f6d8;
}

body.public-ticket-page .payments-table td {
    background: transparent;
}

body.public-ticket-page .hint {
    margin-top: 12px;
    color: #9fd79f;
    font-size: 0.85rem;
}

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

.signature-image {
    max-width: 280px;
    width: 100%;
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.signature-placeholder {
    max-width: 320px;
    margin: 0 auto;
    padding: 32px 20px;
    border-radius: 14px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    color: #9c9c9c;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.2);
}

.public-ticket-footer {
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px 30px;
    text-align: center;
    font-size: 0.9rem;
    color: #bbbbbb;
}

@media (max-width: 768px) {
    body.public-ticket-page {
        padding: 28px 16px;
    }

    .public-ticket-header {
        padding: 28px 20px;
    }

    .meta-block {
        width: 100%;
    }

    body.public-ticket-page .invoice {
        padding: 24px 20px 32px;
    }

    .service-note-form {
        padding: 20px 18px;
        gap: 12px;
    }

    .service-note-form textarea,
    .service-note-textarea {
        min-height: 160px;
    }

    .service-note-button {
        width: 100%;
    }

    .service-note-actions {
        justify-content: center;
    }
}

@media (max-width: 500px) {
    .ticket-meta-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .service-note-actions {
        width: 100%;
    }
}
body.mobile .nav-toggle { font-size: 2.4em; }
body.mobile .nav-menu > li > a { padding: 16px 20px; font-size: 1.25em; }
body.mobile label { font-size: 1.1em; }

/* Global mobile layout adjustments */
@media (max-width: 768px) {
    body {
        padding: 16px 14px 80px;
    }

    .container {
        padding: 0;
    }

    .store-select-form label {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .command-center__handle {
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
        text-align: left;
    }

    .command-center__handle-icon {
        margin-left: auto;
    }

    .command-center__content {
        padding: 0 18px 26px;
    }

    .ticket-table-card__header {
        padding: 16px;
        align-items: stretch;
    }

    .ticket-table-card__body {
        padding: 18px 16px 24px;
    }

    .ticket-queue-toggle {
        width: 100%;
        justify-content: center;
    }

    .queue-toggle-button {
        width: 100%;
        justify-content: space-between;
    }

    .ticket-table-scroll {
        margin: 0 -12px;
        padding: 0 12px 8px;
    }

    .queue-panel table.tickets tr.ticket-row td {
        padding: 14px 16px;
    }

    .po-item-form,
    .parts-item-form,
    .compact-form,
    .payment-form,
    .payment-choice-group {
        flex-direction: column;
        align-items: stretch;
    }

    .po-item-form > *,
    .parts-item-form > *,
    .compact-form > *,
    .payment-form > *,
    .payment-choice-group > * {
        width: 100%;
    }

    .input-narrow,
    .input-compact {
        width: 100%;
    }

    .actions-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .actions-group form,
    .actions-group a,
    .actions-group button,
    .actions-group .button {
        width: 100%;
        text-align: center;
    }

    .filter-buttons {
        width: 100%;
        gap: 12px;
    }

    .filter-buttons .btn {
        flex: 1 1 calc(50% - 12px);
        text-align: center;
    }

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

    .report-toolbar__actions {
        width: 100%;
        justify-content: center;
    }

    .report-toolbar__actions .btn {
        flex: 1 1 45%;
        min-width: 140px;
        justify-content: center;
    }

    .report-toolbar__limit {
        width: 100%;
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .filter-buttons .btn {
        flex: 1 1 100%;
    }

    .queue-toggle-button {
        font-size: 0.95rem;
        gap: 8px;
    }

    .ticket-table-card__header {
        padding: 14px 12px;
    }

    .ticket-table-card__body {
        padding: 16px 12px 20px;
    }

    .report-toolbar__actions {
        flex-direction: column;
        gap: 10px;
    }

    .report-toolbar__actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .report-toolbar__limit {
        align-items: flex-start;
    }

    .status-chip-bar__chips {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .status-chip {
        width: 100%;
        justify-content: space-between;
    }

    .command-center__handle {
        padding: 16px;
    }
}

@media (max-width: 420px) {
    body {
        padding: 14px 10px 86px;
    }

    .queue-toggle-button__label {
        font-size: 0.8rem;
    }

    .queue-toggle-button__count {
        min-width: 32px;
    }

    .payment-choice-group {
        gap: 8px;
    }

    .payment-choice-group .payment-option {
        padding: 12px;
    }
}

body.mobile .store-select-form label {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body.mobile .command-center__handle {
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
}

body.mobile .command-center__handle-icon {
    margin-left: auto;
}

body.mobile .command-center__content {
    padding: 0 18px 26px;
}

body.mobile .ticket-queue-toggle {
    width: 100%;
    justify-content: center;
}

body.mobile .queue-toggle-button {
    width: 100%;
    justify-content: space-between;
}

body.mobile .po-item-form,
body.mobile .parts-item-form,
body.mobile .compact-form,
body.mobile .payment-form,
body.mobile .payment-choice-group {
    flex-direction: column;
    align-items: stretch;
}

body.mobile .po-item-form > *,
body.mobile .parts-item-form > *,
body.mobile .compact-form > *,
body.mobile .payment-form > *,
body.mobile .payment-choice-group > * {
    width: 100%;
}

body.mobile .actions-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

body.mobile .actions-group form,
body.mobile .actions-group a,
body.mobile .actions-group button,
body.mobile .actions-group .button {
    width: 100%;
    text-align: center;
}

body.mobile .filter-buttons {
    width: 100%;
    gap: 12px;
}

body.mobile .filter-buttons .btn {
    flex: 1 1 calc(50% - 12px);
}

body.mobile .report-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

body.mobile .report-toolbar__actions {
    width: 100%;
    justify-content: center;
}

body.mobile .report-toolbar__actions .btn {
    flex: 1 1 45%;
    min-width: 140px;
    justify-content: center;
}

body.mobile .report-toolbar__limit {
    width: 100%;
    align-items: stretch;
}

body.mobile .status-chip-bar__chips {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

body.mobile .status-chip {
    width: 100%;
    justify-content: space-between;
}

body.mobile .command-center__handle {
    padding: 16px;
}

@media print {
    body { margin: 0; padding: 0; }
    body * { visibility: hidden; }
    #detailsModal, #detailsModal * { visibility: visible; }
    #detailsModal {
        position: static;
        padding: 0;
        display: block;
    }
    #detailsModal .modal-content { width: 100%; height: auto; box-shadow: none; overflow: visible; }
    #detailsModal .close,
    #detailsModal .print-report-button { display: none !important; }
}