html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f7fb;
    color: #1f2937;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font: inherit;
}

.app-layout {
    display: flex;
    min-height: 100vh;
    background-color: #f5f7fb;
}

.sidebar {
    width: 260px;
    min-width: 260px;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
    color: white;
    padding: 18px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    background-color: white;
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
    box-sizing: border-box;
}

.topbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.topbar-brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.topbar-logo {
    height: 42px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
    background: white;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.topbar-badge {
    height: 42px;
    min-width: 42px;
    padding: 0 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.topbar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar-org-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.topbar-org-subtitle {
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.2;
    color: #6b7280;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.topbar-button {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .topbar-button:hover {
        opacity: 0.95;
        transform: translateY(-1px);
    }

.page-content {
    flex: 1;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* NAV */

.nav-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.nav-header {
    margin-bottom: 14px;
    flex-shrink: 0;
}

    .nav-header h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
    }

.nav-loading {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

.nav-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

    .nav-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .nav-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.16);
        border-radius: 999px;
    }

.nav-group {
    margin-bottom: 8px;
    border-radius: 10px;
}

    .nav-group[open] {
        background: rgba(255, 255, 255, 0.03);
        padding: 4px 6px;
    }

    .nav-group summary {
        list-style: none;
    }

.nav-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    user-select: none;
}

    .nav-group-title::marker {
        content: "";
    }

.nav-group[open] .nav-group-title {
    color: #ffffff;
}

.nav-group-title::after {
    content: "+";
    font-size: 14px;
    opacity: 0.8;
}

.nav-group[open] .nav-group-title::after {
    content: "−";
}

.nav-group-links {
    padding-top: 2px;
    padding-left: 6px;
}

.nav-item {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin-bottom: 2px;
}

    .nav-item:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    .nav-item.active {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: #ffffff;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
    }

.nav-footer {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.nav-logout {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .nav-logout:hover {
        background: rgba(239, 68, 68, 0.28);
        color: #ffffff;
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* DASHBOARD */

.dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.dashboard-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.dashboard-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.stat-card-alert {
    background: #fff5f5;
    border-color: #fecaca;
}

.stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 34px;
    font-weight: 800;
    color: #111827;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 20px;
}

.dashboard-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.panel-header {
    margin-bottom: 16px;
}

    .panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.dashboard-muted {
    margin: 0;
    color: #6b7280;
}

.dashboard-error {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
}

.dashboard-warning {
    margin-top: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #374151;
}

.quick-actions {
    display: grid;
    gap: 10px;
}

.quick-action-btn {
    width: 100%;
    text-align: left;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

    .quick-action-btn:hover {
        background: #dbeafe;
        transform: translateY(-1px);
    }

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .dashboard-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .dashboard-table th,
    .dashboard-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
    }

    .dashboard-table th {
        color: #475569;
        font-weight: 700;
    }

    .dashboard-table td {
        color: #111827;
    }

/* INVENTORY */

.inventory-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.inventory-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.inventory-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.inventory-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.inventory-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.inventory-stat-alert {
    background: #fff5f5;
    border-color: #fecaca;
}

.inventory-stat-warn {
    background: #fff7ed;
    border-color: #fdba74;
}

.inventory-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.inventory-stat-value {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.inventory-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.inventory-panel-header {
    margin-bottom: 16px;
}

    .inventory-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.inventory-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.inventory-alert-panel {
    border-width: 1px;
}

.inventory-alert-danger {
    background: #fff1f2;
    border-color: #fecdd3;
}

.inventory-alert-warning {
    background: #fff7ed;
    border-color: #fdba74;
}

.inventory-alert-block + .inventory-alert-block {
    margin-top: 18px;
}

.inventory-alert-block h4 {
    margin: 0 0 10px 0;
    color: #9a3412;
}

.inventory-filters-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.inventory-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.inventory-adjust-grid {
    max-width: 760px;
}

.inventory-form-span-2 {
    grid-column: 1 / span 2;
}

.inventory-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.inventory-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .inventory-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.inventory-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.inventory-primary-btn,
.inventory-secondary-btn,
.inventory-toggle-btn,
.inventory-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.inventory-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.inventory-secondary-btn,
.inventory-toggle-btn,
.inventory-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.inventory-inline-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.inventory-primary-btn:hover,
.inventory-secondary-btn:hover,
.inventory-toggle-btn:hover,
.inventory-inline-btn:hover {
    transform: translateY(-1px);
}

.inventory-edit-panel {
    background: #fffbeb;
    border-color: #fde68a;
}

.inventory-adjust-panel {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.inventory-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.inventory-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.inventory-muted {
    margin: 0;
    color: #6b7280;
}

.inventory-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .inventory-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .inventory-table th,
    .inventory-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .inventory-table th {
        color: #475569;
        font-weight: 700;
    }

.inventory-link-strong {
    font-weight: 700;
    color: #111827;
}

.inventory-link-normal {
    font-weight: 500;
    color: #111827;
}

.inventory-row-low {
    background: #fff1f2;
}

.inventory-row-expired {
    background: #fff7ed;
}

.inventory-row-expiring {
    background: #fffbeb;
}

.inventory-row-tag {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
}

.inventory-row-tag-danger {
    color: #b91c1c;
}

.inventory-row-tag-expired {
    color: #c2410c;
}

.inventory-row-tag-warning {
    color: #b45309;
}

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

/* ASSET DETAILS */

.asset-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.asset-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.asset-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.asset-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.asset-panel-header {
    margin-bottom: 16px;
}

    .asset-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.asset-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.asset-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.asset-form-span-2 {
    grid-column: 1 / span 2;
}

.asset-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.asset-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .asset-input:focus,
    .asset-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.asset-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    resize: vertical;
}

.asset-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.asset-primary-btn,
.asset-secondary-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.asset-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.asset-secondary-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

    .asset-primary-btn:hover,
    .assets-toggle-btn:hover,
    .asset-secondary-btn:hover {
        transform: translateY(-1px);
    }

.asset-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.asset-detail-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

.asset-detail-card-wide {
    grid-column: 1 / span 3;
}

.asset-detail-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 8px;
}

.asset-detail-value {
    color: #111827;
    font-size: 15px;
    line-height: 1.5;
}

.asset-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.asset-badge-active {
    background: #dcfce7;
    color: #166534;
}

.asset-badge-repair {
    background: #fef3c7;
    color: #92400e;
}

.asset-badge-retired {
    background: #e5e7eb;
    color: #374151;
}

.asset-badge-lost {
    background: #fee2e2;
    color: #991b1b;
}

.asset-badge-disposed {
    background: #ede9fe;
    color: #5b21b6;
}

.asset-badge-default {
    background: #f3f4f6;
    color: #374151;
}

.asset-muted {
    margin: 0;
    color: #6b7280;
}

.asset-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.asset-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .asset-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .asset-table th,
    .asset-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .asset-table th {
        color: #475569;
        font-weight: 700;
    }


/* ASSETS */

.assets-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.assets-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.assets-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.assets-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.assets-panel-header {
    margin-bottom: 16px;
}

    .assets-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.assets-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.assets-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.assets-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.assets-form-span-2 {
    grid-column: 1 / span 2;
}

.assets-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.assets-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .assets-input:focus,
    .assets-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.assets-inline-input {
    min-width: 160px;
    padding: 8px 10px;
}

.assets-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    resize: vertical;
}

.assets-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.assets-primary-btn,
.assets-toggle-btn,
.assets-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.assets-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.assets-toggle-btn,
.assets-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.assets-inline-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.assets-primary-btn:hover,
.assets-toggle-btn:hover,
.assets-inline-btn:hover {
    transform: translateY(-1px);
}

.assets-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.assets-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.assets-muted {
    margin: 0;
    color: #6b7280;
}

.assets-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .assets-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .assets-table th,
    .assets-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .assets-table th {
        color: #475569;
        font-weight: 700;
    }

.assets-link-strong {
    font-weight: 700;
    color: #111827;
}

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

.assets-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.assets-badge-active {
    background: #dcfce7;
    color: #166534;
}

.assets-badge-repair {
    background: #fef3c7;
    color: #92400e;
}

.assets-badge-retired {
    background: #e5e7eb;
    color: #374151;
}

.assets-badge-lost {
    background: #fee2e2;
    color: #991b1b;
}

.assets-badge-disposed {
    background: #ede9fe;
    color: #5b21b6;
}

.assets-badge-default {
    background: #f3f4f6;
    color: #374151;
}

/* DEPARTMENTS */

.departments-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.departments-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.departments-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.departments-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.departments-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.departments-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.departments-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.departments-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.departments-panel-header {
    margin-bottom: 16px;
}

    .departments-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.departments-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.departments-filters-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.departments-search-input {
    max-width: 320px;
}

.departments-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.departments-edit-grid {
    max-width: 900px;
}

.departments-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.departments-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .departments-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.departments-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.departments-primary-btn,
.departments-secondary-btn,
.departments-toggle-btn,
.departments-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.departments-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.departments-secondary-btn,
.departments-toggle-btn,
.departments-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.departments-inline-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.departments-primary-btn:hover,
.departments-secondary-btn:hover,
.departments-toggle-btn:hover,
.departments-inline-btn:hover {
    transform: translateY(-1px);
}

.departments-edit-panel {
    background: #fffbeb;
    border-color: #fde68a;
}

.departments-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.departments-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.departments-muted {
    margin: 0;
    color: #6b7280;
}

.departments-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .departments-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .departments-table th,
    .departments-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .departments-table th {
        color: #475569;
        font-weight: 700;
    }

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

.departments-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.departments-badge-active {
    background: #dcfce7;
    color: #166534;
}

.departments-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

/* INVENTORY CATEGORIES */

.invcat-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.invcat-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.invcat-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.invcat-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.invcat-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.invcat-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.invcat-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.invcat-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.invcat-panel-header {
    margin-bottom: 16px;
}

    .invcat-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.invcat-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.invcat-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.invcat-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.invcat-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .invcat-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.invcat-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.invcat-primary-btn,
.invcat-secondary-btn,
.invcat-toggle-btn,
.invcat-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.invcat-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.invcat-secondary-btn,
.invcat-toggle-btn,
.invcat-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.invcat-inline-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.invcat-primary-btn:hover,
.invcat-secondary-btn:hover,
.invcat-toggle-btn:hover,
.invcat-inline-btn:hover {
    transform: translateY(-1px);
}

.invcat-edit-panel {
    background: #fffbeb;
    border-color: #fde68a;
}

.invcat-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.invcat-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.invcat-muted {
    margin: 0;
    color: #6b7280;
}

.invcat-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .invcat-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .invcat-table th,
    .invcat-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .invcat-table th {
        color: #475569;
        font-weight: 700;
    }

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

.invcat-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.invcat-badge-active {
    background: #dcfce7;
    color: #166534;
}

.invcat-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}


/* INVENTORY DETAILS */

.invdetails-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.invdetails-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.invdetails-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.invdetails-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.invdetails-panel-header {
    margin-bottom: 16px;
}

    .invdetails-panel-header h3,
    .invdetails-note-editor h4 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.invdetails-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.invdetails-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.invdetails-form-span-2 {
    grid-column: 1 / span 2;
}

.invdetails-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.invdetails-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .invdetails-input:focus,
    .invdetails-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.invdetails-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    resize: vertical;
}

.invdetails-note-textarea {
    min-height: 140px;
}

.invdetails-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.invdetails-primary-btn,
.invdetails-secondary-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.invdetails-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.invdetails-secondary-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

    .invdetails-primary-btn:hover,
    .invdetails-secondary-btn:hover {
        transform: translateY(-1px);
    }

.invdetails-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.invdetails-detail-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

.invdetails-detail-card-wide {
    grid-column: 1 / span 3;
}

.invdetails-detail-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 8px;
}

.invdetails-detail-value {
    color: #111827;
    font-size: 15px;
    line-height: 1.5;
}

.invdetails-link-normal {
    font-weight: 500;
    color: #111827;
}

.invdetails-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.invdetails-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #374151;
}

.invdetails-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .invdetails-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .invdetails-table th,
    .invdetails-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .invdetails-table th {
        color: #475569;
        font-weight: 700;
    }

.invdetails-note-editor {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.invdetails-note-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.invdetails-notes-grid {
    display: grid;
    gap: 16px;
}

.invdetails-note-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
}

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

.invdetails-note-title {
    margin: 0;
    font-weight: 700;
    color: #111827;
}

.invdetails-note-date {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 13px;
}

.invdetails-note-content {
    margin-top: 12px;
    white-space: pre-wrap;
    color: #374151;
}

.invdetails-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.invdetails-badge-active {
    background: #dcfce7;
    color: #166534;
}

.invdetails-badge-low {
    background: #fef3c7;
    color: #92400e;
}

.invdetails-badge-out {
    background: #fee2e2;
    color: #991b1b;
}

.invdetails-badge-discontinued {
    background: #e5e7eb;
    color: #374151;
}

.invdetails-badge-damaged {
    background: #ede9fe;
    color: #5b21b6;
}

.invdetails-badge-default {
    background: #f3f4f6;
    color: #374151;
}

.invdetails-muted {
    margin: 0;
    color: #6b7280;
}

.invdetails-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.invdetails-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

/* KIOSK TIME */

.kiosk-page {
    min-height: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 0 24px 0;
}

.kiosk-shell {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kiosk-header {
    text-align: center;
    padding: 10px 0 0 0;
}

.kiosk-title {
    margin: 0;
    font-size: 38px;
    font-weight: 800;
    color: #111827;
}

.kiosk-subtitle {
    margin: 10px 0 0 0;
    color: #6b7280;
    font-size: 16px;
}

.kiosk-main-grid {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.kiosk-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.kiosk-card-primary {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.kiosk-card-secondary {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kiosk-card-title {
    margin: 0 0 18px 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.kiosk-form-group {
    margin-bottom: 18px;
}

.kiosk-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.kiosk-input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0.12em;
}

    .kiosk-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

.kiosk-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kiosk-action-row-large {
    margin-top: 22px;
}

.kiosk-primary-btn,
.kiosk-secondary-btn,
.kiosk-clockin-btn,
.kiosk-clockout-btn {
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.kiosk-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}

.kiosk-secondary-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.kiosk-clockin-btn {
    flex: 1;
    min-width: 180px;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.18);
}

.kiosk-clockout-btn {
    flex: 1;
    min-width: 180px;
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.18);
}

    .kiosk-primary-btn:hover,
    .kiosk-secondary-btn:hover,
    .kiosk-clockin-btn:hover,
    .kiosk-clockout-btn:hover {
        transform: translateY(-1px);
    }

    .kiosk-primary-btn:disabled,
    .kiosk-secondary-btn:disabled,
    .kiosk-clockin-btn:disabled,
    .kiosk-clockout-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.kiosk-person-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.kiosk-person-name {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.kiosk-badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.kiosk-badge-in {
    background: #dcfce7;
    color: #166534;
}

.kiosk-badge-out {
    background: #e5e7eb;
    color: #374151;
}

.kiosk-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #374151;
    font-size: 16px;
}

.kiosk-empty-state {
    text-align: center;
}

.kiosk-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.kiosk-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.kiosk-muted {
    margin: 0;
    color: #6b7280;
}

/* LOCATION DETAILS */

.locationdetails-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.locationdetails-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.locationdetails-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.locationdetails-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.locationdetails-panel-header {
    margin-bottom: 16px;
}

    .locationdetails-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.locationdetails-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.locationdetails-detail-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

.locationdetails-detail-card-wide {
    grid-column: 1 / span 2;
}

.locationdetails-detail-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 8px;
}

.locationdetails-detail-value {
    color: #111827;
    font-size: 15px;
    line-height: 1.5;
}

.locationdetails-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.locationdetails-badge-active {
    background: #dcfce7;
    color: #166534;
}

.locationdetails-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

.locationdetails-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.locationdetails-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.locationdetails-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.locationdetails-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.locationdetails-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .locationdetails-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .locationdetails-table th,
    .locationdetails-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .locationdetails-table th {
        color: #475569;
        font-weight: 700;
    }

.locationdetails-link-strong {
    font-weight: 700;
    color: #111827;
}

.locationdetails-muted {
    margin: 0;
    color: #6b7280;
}

.locationdetails-error {
    color: #dc2626;
    margin: 0;
    font-weight: 600;
}

/* LOCATIONS */

.locations-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.locations-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.locations-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.locations-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.locations-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.locations-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.locations-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.locations-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.locations-panel-header {
    margin-bottom: 16px;
}

    .locations-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.locations-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.locations-filters-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.locations-search-input {
    max-width: 320px;
}

.locations-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.locations-form-span-2 {
    grid-column: 1 / span 2;
}

.locations-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.locations-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .locations-input:focus,
    .locations-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.locations-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    resize: vertical;
}

.locations-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.locations-primary-btn,
.locations-secondary-btn,
.locations-toggle-btn,
.locations-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.locations-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.locations-secondary-btn,
.locations-toggle-btn,
.locations-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.locations-inline-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.locations-primary-btn:hover,
.locations-secondary-btn:hover,
.locations-toggle-btn:hover,
.locations-inline-btn:hover {
    transform: translateY(-1px);
}

.locations-edit-panel {
    background: #fffbeb;
    border-color: #fde68a;
}

.locations-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.locations-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.locations-muted {
    margin: 0;
    color: #6b7280;
}

.locations-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .locations-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .locations-table th,
    .locations-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .locations-table th {
        color: #475569;
        font-weight: 700;
    }

.locations-link-strong {
    font-weight: 700;
    color: #111827;
}

.locations-link-normal {
    font-weight: 500;
    color: #111827;
}

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

.locations-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.locations-badge-active {
    background: #dcfce7;
    color: #166534;
}

.locations-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

/* LOGIN PAGE */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* LEFT SIDE */

.login-left {
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-brand {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
}

.login-tagline {
    font-size: 15px;
    margin-bottom: 24px;
    opacity: 0.95;
}

.login-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .login-features li {
        margin-bottom: 10px;
        font-size: 14px;
    }

/* RIGHT SIDE */

.login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f9fafb;
}

.login-card {
    width: 100%;
    max-width: 320px;
}

    .login-card h2 {
        margin-bottom: 6px;
        font-size: 24px;
        font-weight: 800;
    }

.login-subtext {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* FIELDS */

.login-field {
    margin-bottom: 16px;
}

    .login-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #374151;
    }

    .login-field input {
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #d1d5db;
        font-size: 14px;
    }

        .login-field input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
        }

/* BUTTON */

.login-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    color: white;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.15s ease;
}

    .login-button:hover {
        transform: translateY(-1px);
    }



.login-error {
    color: #dc2626;
    margin-top: 12px;
    font-size: 14px;
}



.login-footer {
    margin-top: 20px;
    font-size: 13px;
    color: #6b7280;
}

    .login-footer a {
        color: #2563eb;
        font-weight: 600;
        margin-left: 4px;
        text-decoration: none;
    }

/* MY ASSETS */

.myassets-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.myassets-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.myassets-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.myassets-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.myassets-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.myassets-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.myassets-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.myassets-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.myassets-panel-header {
    margin-bottom: 16px;
}

    .myassets-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.myassets-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .myassets-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .myassets-table th,
    .myassets-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .myassets-table th {
        color: #475569;
        font-weight: 700;
    }

.myassets-name {
    font-weight: 700;
    color: #111827;
}

.myassets-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.myassets-badge-active {
    background: #dcfce7;
    color: #166534;
}

.myassets-badge-repair {
    background: #fef3c7;
    color: #92400e;
}

.myassets-badge-retired {
    background: #e5e7eb;
    color: #374151;
}

.myassets-badge-lost {
    background: #fee2e2;
    color: #991b1b;
}

.myassets-badge-default {
    background: #f3f4f6;
    color: #374151;
}

.myassets-muted {
    margin: 0;
    color: #6b7280;
}

.myassets-error {
    color: #dc2626;
    margin: 0;
    font-weight: 600;
}

/* MY PROFILE */

.myprofile-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.myprofile-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.myprofile-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.myprofile-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}

.myprofile-side-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.myprofile-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.myprofile-panel-header {
    margin-bottom: 16px;
}

    .myprofile-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.myprofile-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.myprofile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.myprofile-name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.myprofile-role-line {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.myprofile-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.myprofile-section-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

    .myprofile-section-card h3,
    .myprofile-subsection h3 {
        margin: 0 0 12px 0;
        font-size: 18px;
        font-weight: 700;
        color: #111827;
    }

.myprofile-subsection {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.myprofile-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #374151;
    font-size: 14px;
}

.myprofile-notes {
    margin: 0;
    white-space: pre-wrap;
    color: #374151;
    line-height: 1.6;
}

.myprofile-actions {
    display: grid;
    gap: 10px;
}

.myprofile-action-btn {
    width: 100%;
    text-align: left;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

    .myprofile-action-btn:hover {
        background: #dbeafe;
        transform: translateY(-1px);
    }

.myprofile-muted {
    margin: 0;
    color: #6b7280;
}

.myprofile-error {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
}

/* PEOPLE */

.people-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.people-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.people-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.people-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.people-panel-header {
    margin-bottom: 16px;
}

    .people-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.people-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.people-filters-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.people-search-input {
    max-width: 320px;
}

.people-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.people-form-span-2 {
    grid-column: 1 / span 2;
}

.people-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.people-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .people-input:focus,
    .people-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.people-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 100px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    resize: vertical;
}

.people-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.people-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.people-primary-btn,
.people-secondary-btn,
.people-toggle-btn,
.people-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

.people-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.people-secondary-btn,
.people-toggle-btn,
.people-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.people-inline-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.people-primary-btn:hover,
.people-secondary-btn:hover,
.people-toggle-btn:hover,
.people-inline-btn:hover {
    transform: translateY(-1px);
}

.people-primary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.people-edit-panel {
    background: #fffbeb;
    border-color: #fde68a;
}

.people-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.people-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.people-muted {
    margin: 0;
    color: #6b7280;
}

.people-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .people-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .people-table th,
    .people-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .people-table th {
        color: #475569;
        font-weight: 700;
    }

.people-link-strong {
    font-weight: 700;
    color: #111827;
}

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

.people-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.people-badge-active {
    background: #dcfce7;
    color: #166534;
}

.people-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

.people-badge-leave {
    background: #fef3c7;
    color: #92400e;
}

.people-badge-terminated {
    background: #fee2e2;
    color: #991b1b;
}

.people-badge-default {
    background: #f3f4f6;
    color: #374151;
}

/* PEOPLE REPORTS */

.peoplereports-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.peoplereports-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.peoplereports-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.peoplereports-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.peoplereports-panel-header {
    margin-bottom: 16px;
}

    .peoplereports-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.peoplereports-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.peoplereports-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.peoplereports-tab {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

    .peoplereports-tab:hover {
        transform: translateY(-1px);
        background: #f8fafc;
    }

.peoplereports-tab-active {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.peoplereports-toolbar-actions {
    display: flex;
    gap: 10px;
}

.peoplereports-export-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: #16a34a;
    color: #ffffff;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

    .peoplereports-export-btn:hover {
        transform: translateY(-1px);
    }

    .peoplereports-export-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.peoplereports-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.peoplereports-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.peoplereports-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.peoplereports-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.peoplereports-stat-value-text {
    font-size: 18px;
    line-height: 1.5;
}

.peoplereports-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .peoplereports-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .peoplereports-table th,
    .peoplereports-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .peoplereports-table th {
        color: #475569;
        font-weight: 700;
    }

.peoplereports-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.peoplereports-badge-active {
    background: #dcfce7;
    color: #166534;
}

.peoplereports-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

.peoplereports-badge-leave {
    background: #fef3c7;
    color: #92400e;
}

.peoplereports-badge-terminated {
    background: #fee2e2;
    color: #991b1b;
}

.peoplereports-badge-default {
    background: #f3f4f6;
    color: #374151;
}

.peoplereports-muted {
    margin: 0;
    color: #6b7280;
}

.peoplereports-error {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
}

/* PERSON DETAILS */

.persondetails-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.persondetails-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.persondetails-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.persondetails-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
}

.persondetails-side-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.persondetails-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.persondetails-panel-header {
    margin-bottom: 16px;
}

    .persondetails-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.persondetails-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.persondetails-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.persondetails-name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.persondetails-role-line {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.persondetails-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.persondetails-section-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

    .persondetails-section-card h3,
    .persondetails-subsection h3 {
        margin: 0 0 12px 0;
        font-size: 18px;
        font-weight: 700;
        color: #111827;
    }

.persondetails-subsection {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.persondetails-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #374151;
    font-size: 14px;
}

.persondetails-notes {
    margin: 0;
    white-space: pre-wrap;
    color: #374151;
    line-height: 1.6;
}

.persondetails-actions {
    display: grid;
    gap: 10px;
}

.persondetails-action-btn {
    width: 100%;
    text-align: left;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

   .persondetails-action-btn:hover {
        background: #dbeafe;
        transform: translateY(-1px);
    }

.persondetails-muted {
    margin: 0;
    color: #6b7280;
}

.persondetails-error {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
}

/* SETTINGS */

.settings-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.settings-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.settings-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.settings-plan-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.settings-plan-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.settings-plan-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.settings-plan-value {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    line-height: 1.3;
}

.settings-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.settings-panel-header {
    margin-bottom: 16px;
}

    .settings-panel-header h3,
    .settings-subsection h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.settings-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-detail-card,
.settings-color-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

.settings-detail-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 8px;
}

.settings-detail-value {
    color: #111827;
    font-size: 15px;
    line-height: 1.5;
}

.settings-subsection {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.settings-form-grid,
.settings-branding-locked {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-form-span-2 {
    grid-column: 1 / span 2;
}

.settings-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.settings-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .settings-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.settings-alert {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.settings-alert-danger {
    border: 1px solid #f5c2c7;
    background: #fff5f5;
    color: #842029;
}

.settings-alert-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.settings-logo-preview-wrap {
    margin-top: 8px;
}

.settings-logo-preview {
    max-height: 90px;
    max-width: 260px;
    object-fit: contain;
    border: 1px solid #ddd;
    padding: 8px;
    background: white;
    border-radius: 10px;
}

.settings-default-logo-box {
    margin-top: 8px;
    padding: 12px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    background: #fafafa;
}

.settings-branding-locked {
    opacity: 0.6;
    pointer-events: none;
}

.settings-file-name {
    margin-top: 8px;
    color: #374151;
    font-size: 14px;
}

.settings-action-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.settings-save-row {
    margin-top: 20px;
}

.settings-primary-btn,
.settings-secondary-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.settings-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.settings-secondary-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

    .settings-primary-btn:hover,
    .settings-secondary-btn:hover {
        transform: translateY(-1px);
    }

    .settings-primary-btn:disabled,
    .settings-secondary-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.settings-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.settings-color-swatch {
    margin-top: 8px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

.settings-subsection-note {
    margin-top: 16px;
    color: #374151;
    line-height: 1.6;
}

.settings-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.settings-error {
    color: #dc2626;
    margin-top: 14px;
    font-weight: 600;
}

.settings-muted {
    margin: 0;
    color: #6b7280;
}

/* MY TIME */

.mytime-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.mytime-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.mytime-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.mytime-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.mytime-clock-panel {
    max-width: 760px;
}

.mytime-panel-header {
    margin-bottom: 16px;
}

    .mytime-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.mytime-account-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #374151;
    margin-bottom: 14px;
}

.mytime-status-banner {
    padding: 14px 16px;
    border-radius: 12px;
    margin: 14px 0;
    font-weight: 600;
}

.mytime-status-banner-in {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.mytime-status-banner-out {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.mytime-action-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.mytime-clockin-btn,
.mytime-clockout-btn {
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.mytime-clockin-btn {
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.18);
}

.mytime-clockout-btn {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.18);
}

    .mytime-clockin-btn:hover,
    .mytime-clockout-btn:hover {
        transform: translateY(-1px);
    }

    .mytime-clockin-btn:disabled,
    .mytime-clockout-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.mytime-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.mytime-error {
    color: #dc2626;
    margin: 0;
    font-weight: 600;
}

.mytime-muted {
    margin: 0;
    color: #6b7280;
}

.mytime-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.mytime-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.mytime-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.mytime-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.mytime-stat-meta {
    margin-top: 6px;
    color: #6b7280;
    font-size: 14px;
}

.mytime-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .mytime-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .mytime-table th,
    .mytime-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .mytime-table th {
        color: #475569;
        font-weight: 700;
    }

.mytime-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.mytime-badge-open {
    background: #dbeafe;
    color: #1d4ed8;
}

.mytime-badge-closed {
    background: #e5e7eb;
    color: #374151;
}

/* TIME MANAGEMENT */

.timemgmt-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.timemgmt-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.timemgmt-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.timemgmt-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.timemgmt-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.timemgmt-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.timemgmt-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.timemgmt-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.timemgmt-panel-header {
    margin-bottom: 16px;
}

    .timemgmt-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.timemgmt-filters-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.timemgmt-search-input {
    max-width: 320px;
}

.timemgmt-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .timemgmt-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.timemgmt-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .timemgmt-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .timemgmt-table th,
    .timemgmt-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .timemgmt-table th {
        color: #475569;
        font-weight: 700;
    }

.timemgmt-link-strong {
    font-weight: 700;
    color: #111827;
}

.timemgmt-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.timemgmt-clockin-btn,
.timemgmt-clockout-btn {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.timemgmt-clockin-btn {
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.16);
}

.timemgmt-clockout-btn {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.16);
}

    .timemgmt-clockin-btn:hover,
    .timemgmt-clockout-btn:hover {
        transform: translateY(-1px);
    }

    .timemgmt-clockin-btn:disabled,
    .timemgmt-clockout-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.timemgmt-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.timemgmt-badge-in {
    background: #dcfce7;
    color: #166534;
}

.timemgmt-badge-out {
    background: #e5e7eb;
    color: #374151;
}

.timemgmt-badge-active {
    background: #dcfce7;
    color: #166534;
}

.timemgmt-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

.timemgmt-badge-leave {
    background: #fef3c7;
    color: #92400e;
}

.timemgmt-badge-terminated {
    background: #fee2e2;
    color: #991b1b;
}

.timemgmt-badge-default {
    background: #f3f4f6;
    color: #374151;
}

.timemgmt-success {
    margin: 0;
    color: #15803d;
    font-weight: 600;
}

.timemgmt-error {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
}

.timemgmt-muted {
    margin: 0;
    color: #6b7280;
}

/* REGISTER PAGE */

.register-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 20px;
}

.register-container {
    width: 100%;
    max-width: 1150px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.register-left {
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.register-brand {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 12px;
}

.register-tagline {
    font-size: 15px;
    margin-bottom: 24px;
    opacity: 0.95;
    line-height: 1.6;
}

.register-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .register-features li {
        margin-bottom: 12px;
        font-size: 14px;
    }

.register-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f9fafb;
}

.register-card {
    width: 100%;
    max-width: 500px;
}

    .register-card h2 {
        margin-bottom: 6px;
        font-size: 26px;
        font-weight: 800;
    }

.register-subtext {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.register-section-title {
    margin: 22px 0 10px 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.register-field {
    margin-bottom: 16px;
}

    .register-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #374151;
    }

    .register-field input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #d1d5db;
        font-size: 14px;
    }

        .register-field input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
        }

.register-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    color: white;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.15s ease;
}

    .register-button:hover {
        transform: translateY(-1px);
    }

    .register-button:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.register-error {
    color: #dc2626;
    margin-top: 12px;
    font-size: 14px;
}

.register-success {
    color: #15803d;
    margin-top: 12px;
    font-size: 14px;
}

.register-footer {
    margin-top: 20px;
    font-size: 13px;
    color: #6b7280;
}

    .register-footer a {
        color: #2563eb;
        font-weight: 600;
        margin-left: 4px;
        text-decoration: none;
    }

/* FORGOT PASSWORD */

.forgotpw-page,
.resetpw-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 20px;
}

.forgotpw-container,
.resetpw-container {
    width: 100%;
    max-width: 460px;
}

.forgotpw-card,
.resetpw-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.forgotpw-title,
.resetpw-title {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.forgotpw-subtitle,
.resetpw-subtitle {
    margin: 0 0 24px 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.forgotpw-field,
.resetpw-field {
    margin-bottom: 16px;
}

    .forgotpw-field label,
    .resetpw-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #374151;
    }

    .forgotpw-field input,
    .resetpw-field input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #d1d5db;
        font-size: 14px;
    }

        .forgotpw-field input:focus,
        .resetpw-field input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
        }

.forgotpw-button,
.resetpw-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    color: white;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.15s ease;
}

    .forgotpw-button:hover,
    .resetpw-button:hover {
        transform: translateY(-1px);
    }

    .forgotpw-button:disabled,
    .resetpw-button:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.forgotpw-error,
.resetpw-error {
    color: #dc2626;
    margin-top: 12px;
    font-size: 14px;
}

.forgotpw-success,
.resetpw-success {
    color: #15803d;
    margin-top: 12px;
    font-size: 14px;
}

.forgotpw-footer,
.resetpw-footer {
    margin-top: 20px;
    font-size: 13px;
    color: #6b7280;
}

    .forgotpw-footer a,
    .resetpw-footer a {
        color: #2563eb;
        font-weight: 600;
        text-decoration: none;
    }

.login-footer-links {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
}

    .login-footer-links a {
        color: #2563eb;
        font-weight: 600;
        text-decoration: none;
    }

/* TRIAL EXPIRED */

.trialexpired-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 20px;
}

.trialexpired-card {
    max-width: 520px;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    text-align: center;
}

    .trialexpired-card h1 {
        margin: 0 0 12px 0;
        font-size: 30px;
        font-weight: 800;
        color: #111827;
    }

    .trialexpired-card p {
        color: #6b7280;
        line-height: 1.6;
        margin: 0 0 12px 0;
    }

.trialexpired-actions {
    margin-top: 22px;
}

.trialexpired-btn {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}


.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.profile-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.profile-name {
    margin-bottom: 20px;
}

.profile-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

    .profile-section h3 {
        margin-bottom: 10px;
    }

.quick-actions {
    margin-top: 20px;
}

.btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: white;
    cursor: pointer;
    margin-top: 8px;
}

    .btn:hover {
        background: #1d4ed8;
    }



@media (max-width: 900px) {
    .register-container {
        grid-template-columns: 1fr;
    }

    .register-left {
        display: none;
    }
}

@media (max-width: 640px) {
    .register-grid {
        grid-template-columns: 1fr;
    }

    .register-right {
        padding: 24px;
    }
}




@media (max-width: 900px) {
    .timemgmt-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .timemgmt-title {
        font-size: 24px;
    }

    .timemgmt-panel,
    .timemgmt-stat-card {
        padding: 18px;
    }

    .timemgmt-table-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .timemgmt-clockin-btn,
    .timemgmt-clockout-btn {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .mytime-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .mytime-title {
        font-size: 24px;
    }

    .mytime-panel,
    .mytime-stat-card {
        padding: 18px;
    }

    .mytime-action-row {
        flex-direction: column;
    }

    .mytime-clockin-btn,
    .mytime-clockout-btn {
        width: 100%;
    }
}






@media (max-width: 1000px) {
    .settings-plan-card,
    .settings-details-grid,
    .settings-color-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .settings-form-grid,
    .settings-branding-locked {
        grid-template-columns: 1fr;
    }

    .settings-form-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .settings-title {
        font-size: 24px;
    }

    .settings-panel,
    .settings-plan-item {
        padding: 18px;
    }

    .settings-action-row {
        flex-direction: column;
    }

    .settings-primary-btn,
    .settings-secondary-btn {
        width: 100%;
    }
}


@media (max-width: 1000px) {
    .persondetails-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .persondetails-section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .persondetails-title {
        font-size: 24px;
    }

    .persondetails-panel {
        padding: 18px;
    }

    .persondetails-profile-header {
        align-items: flex-start;
    }

    .persondetails-name {
        font-size: 24px;
    }
}

@media (max-width: 900px) {
    .peoplereports-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .peoplereports-title {
        font-size: 24px;
    }

    .peoplereports-panel,
    .peoplereports-stat-card {
        padding: 18px;
    }

    .peoplereports-toolbar {
        align-items: stretch;
    }

    .peoplereports-toolbar-actions {
        width: 100%;
    }

    .peoplereports-export-btn {
        width: 100%;
    }
}




@media (max-width: 900px) {
    .people-form-grid {
        grid-template-columns: 1fr;
    }

    .people-form-span-2 {
        grid-column: auto;
    }

    .people-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .people-title {
        font-size: 24px;
    }

    .people-panel {
        padding: 18px;
    }

    .people-action-row {
        flex-direction: column;
    }
}




@media (max-width: 1000px) {
    .myprofile-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .myprofile-section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .myprofile-title {
        font-size: 24px;
    }

    .myprofile-panel {
        padding: 18px;
    }

    .myprofile-profile-header {
        align-items: flex-start;
    }

    .myprofile-name {
        font-size: 24px;
    }
}




@media (max-width: 900px) {
    .myassets-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .myassets-title {
        font-size: 24px;
    }

    .myassets-panel,
    .myassets-stat-card {
        padding: 18px;
    }
}



@media (max-width: 800px) {
    .login-container {
        grid-template-columns: 1fr;
    }

    .login-left {
        display: none;
    }
}

@media (max-width: 900px) {
    .locations-stats-grid {
        grid-template-columns: 1fr;
    }

    .locations-form-grid {
        grid-template-columns: 1fr;
    }

    .locations-form-span-2 {
        grid-column: auto;
    }

    .locations-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .locations-title {
        font-size: 24px;
    }

    .locations-panel,
    .locations-stat-card {
        padding: 18px;
    }

    .locations-action-row {
        flex-direction: column;
    }
}


@media (max-width: 900px) {
    .locationdetails-details-grid,
    .locationdetails-stats-grid {
        grid-template-columns: 1fr;
    }

    .locationdetails-detail-card-wide {
        grid-column: auto;
    }
}




@media (max-width: 640px) {
    .locationdetails-title {
        font-size: 24px;
    }

    .locationdetails-panel,
    .locationdetails-stat-card {
        padding: 18px;
    }
}

@media (max-width: 900px) {
    .kiosk-main-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .kiosk-title {
        font-size: 28px;
    }

    .kiosk-card {
        padding: 20px;
        border-radius: 16px;
    }

    .kiosk-input {
        font-size: 18px;
    }

    .kiosk-action-row {
        flex-direction: column;
    }

    .kiosk-clockin-btn,
    .kiosk-clockout-btn {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 1000px) {
    .invdetails-details-grid,
    .invdetails-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invdetails-detail-card-wide {
        grid-column: 1 / span 2;
    }
}

@media (max-width: 800px) {
    .invdetails-form-grid,
    .invdetails-details-grid,
    .invdetails-stats-grid {
        grid-template-columns: 1fr;
    }

    .invdetails-form-span-2,
    .invdetails-detail-card-wide {
        grid-column: auto;
    }

    .invdetails-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .invdetails-title {
        font-size: 24px;
    }

    .invdetails-panel {
        padding: 18px;
    }

    .invdetails-action-row {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .invcat-stats-grid {
        grid-template-columns: 1fr;
    }

    .invcat-form-grid {
        grid-template-columns: 1fr;
    }

    .invcat-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .invcat-title {
        font-size: 24px;
    }

    .invcat-panel,
    .invcat-stat-card {
        padding: 18px;
    }

    .invcat-action-row {
        flex-direction: column;
    }
}


@media (max-width: 900px) {
    .departments-stats-grid {
        grid-template-columns: 1fr;
    }

    .departments-form-grid {
        grid-template-columns: 1fr;
    }

    .departments-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .departments-title {
        font-size: 24px;
    }

    .departments-panel,
    .departments-stat-card {
        padding: 18px;
    }

    .departments-action-row {
        flex-direction: column;
    }
}






@media (max-width: 1000px) {
    .assets-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .assets-form-grid,
    .assets-filters-grid {
        grid-template-columns: 1fr;
    }

    .assets-form-span-2 {
        grid-column: auto;
    }

    .assets-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}









@media (max-width: 640px) {
    .assets-title {
        font-size: 24px;
    }

    .assets-panel {
        padding: 18px;
    }

    .assets-action-row {
        flex-direction: column;
    }
}

@media (max-width: 1000px) {
    .asset-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asset-detail-card-wide {
        grid-column: 1 / span 2;
    }
}

@media (max-width: 800px) {
    .asset-form-grid,
    .asset-details-grid {
        grid-template-columns: 1fr;
    }

    .asset-form-span-2,
    .asset-detail-card-wide {
        grid-column: auto;
    }

    .asset-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .asset-title {
        font-size: 24px;
    }

    .asset-panel {
        padding: 18px;
    }

    .asset-action-row {
        flex-direction: column;
    }
}



@media (max-width: 1200px) {
    .inventory-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .inventory-filters-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .inventory-stats-grid,
    .inventory-filters-grid,
    .inventory-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .inventory-stats-grid,
    .inventory-filters-grid,
    .inventory-form-grid {
        grid-template-columns: 1fr;
    }

    .inventory-form-span-2 {
        grid-column: auto;
    }

    .inventory-title {
        font-size: 24px;
    }

    .inventory-panel,
    .inventory-stat-card {
        padding: 18px;
    }

    .inventory-action-row {
        flex-direction: column;
    }
}

/* USERS */

.users-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.users-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.users-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.users-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.users-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.users-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.users-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.users-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.users-panel-header {
    margin-bottom: 16px;
}

    .users-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.users-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.users-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.users-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .users-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.users-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.users-primary-btn,
.users-secondary-btn,
.users-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.users-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.users-secondary-btn,
.users-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.users-inline-btn-secondary {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.users-primary-btn:hover,
.users-secondary-btn:hover,
.users-inline-btn:hover {
    transform: translateY(-1px);
}

.users-edit-panel {
    background: #fff7e6;
    border-color: #facc15;
}

.users-password-panel {
    background: #eef6ff;
    border-color: #bfdbfe;
}

.users-password-user {
    margin: 0 0 16px 0;
    color: #374151;
}

.users-success {
    margin: 0;
    color: #15803d;
    font-weight: 600;
}

.users-error {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
}

.users-muted {
    margin: 0;
    color: #6b7280;
}

.users-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .users-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .users-table th,
    .users-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .users-table th {
        color: #475569;
        font-weight: 700;
    }

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

.users-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.users-badge-active {
    background: #dcfce7;
    color: #166534;
}

.users-badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

.users-badge-owner {
    background: #fee2e2;
    color: #991b1b;
}

.users-badge-admin {
    background: #ede9fe;
    color: #5b21b6;
}

.users-badge-manager {
    background: #fef3c7;
    color: #92400e;
}

.users-badge-user {
    background: #dbeafe;
    color: #1d4ed8;
}

.users-badge-viewer {
    background: #ecfccb;
    color: #3f6212;
}

.users-badge-default {
    background: #f3f4f6;
    color: #374151;
}

/* VENDOR DETAILS */

.vendordetails-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.vendordetails-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.vendordetails-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.vendordetails-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.vendordetails-panel-header {
    margin-bottom: 16px;
}

    .vendordetails-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.vendordetails-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.vendordetails-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vendordetails-form-span-2 {
    grid-column: 1 / span 2;
}

.vendordetails-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.vendordetails-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .vendordetails-input:focus,
    .vendordetails-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.vendordetails-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 100px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    resize: vertical;
}

.vendordetails-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.vendordetails-primary-btn,
.vendordetails-secondary-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.vendordetails-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.vendordetails-secondary-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

    .vendordetails-primary-btn:hover,
    .vendordetails-secondary-btn:hover {
        transform: translateY(-1px);
    }

.vendordetails-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vendordetails-detail-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

.vendordetails-detail-card-wide {
    grid-column: 1 / span 2;
}

.vendordetails-detail-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 8px;
}

.vendordetails-detail-value {
    color: #111827;
    font-size: 15px;
    line-height: 1.5;
}

.vendordetails-link-normal,
.vendordetails-link-strong {
    color: #111827;
    text-decoration: none;
}

.vendordetails-link-strong {
    font-weight: 700;
}

.vendordetails-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .vendordetails-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .vendordetails-table th,
    .vendordetails-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .vendordetails-table th {
        color: #475569;
        font-weight: 700;
    }

.vendordetails-muted {
    margin: 0;
    color: #6b7280;
}

.vendordetails-error {
    margin-top: 12px;
    color: #dc2626;
    font-weight: 600;
}

/* VENDORS */

.vendors-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.vendors-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
}

.vendors-subtitle {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.vendors-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.vendors-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.vendors-stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.vendors-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.vendors-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.vendors-panel-header {
    margin-bottom: 16px;
}

    .vendors-panel-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.vendors-panel-header-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.vendors-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vendors-form-span-2 {
    grid-column: 1 / span 2;
}

.vendors-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.vendors-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
}

    .vendors-input:focus,
    .vendors-textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.vendors-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 100px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    resize: vertical;
}

.vendors-action-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.vendors-primary-btn,
.vendors-secondary-btn,
.vendors-toggle-btn,
.vendors-inline-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.vendors-primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.vendors-secondary-btn,
.vendors-toggle-btn,
.vendors-inline-btn {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.vendors-inline-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.vendors-primary-btn:hover,
.vendors-secondary-btn:hover,
.vendors-toggle-btn:hover,
.vendors-inline-btn:hover {
    transform: translateY(-1px);
}

.vendors-edit-panel {
    background: #fff3cd;
    border-color: #facc15;
}

.vendors-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

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

    .vendors-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    .vendors-table th,
    .vendors-table td {
        text-align: left;
        padding: 12px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .vendors-table th {
        color: #475569;
        font-weight: 700;
    }

.vendors-link-strong {
    font-weight: 700;
    color: #111827;
    text-decoration: none;
}

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

.vendors-success {
    color: #15803d;
    margin-top: 14px;
    font-weight: 600;
}

.vendors-error {
    color: #dc2626;
    margin: 0;
    font-weight: 600;
}

.vendors-muted {
    margin: 0;
    color: #6b7280;
}

@media (max-width: 900px) {
    .vendors-stats-grid,
    .vendors-form-grid {
        grid-template-columns: 1fr;
    }

    .vendors-form-span-2 {
        grid-column: auto;
    }

    .vendors-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .vendors-title {
        font-size: 24px;
    }

    .vendors-panel,
    .vendors-stat-card {
        padding: 18px;
    }

    .vendors-action-row,
    .vendors-table-actions {
        flex-direction: column;
    }

    .vendors-primary-btn,
    .vendors-secondary-btn,
    .vendors-toggle-btn,
    .vendors-inline-btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .vendordetails-form-grid,
    .vendordetails-details-grid {
        grid-template-columns: 1fr;
    }

    .vendordetails-form-span-2,
    .vendordetails-detail-card-wide {
        grid-column: auto;
    }

    .vendordetails-panel-header-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .vendordetails-title {
        font-size: 24px;
    }

    .vendordetails-panel {
        padding: 18px;
    }

    .vendordetails-action-row {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .users-stats-grid,
    .users-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .users-title {
        font-size: 24px;
    }

    .users-panel,
    .users-stat-card {
        padding: 18px;
    }

    .users-action-row,
    .users-table-actions {
        flex-direction: column;
    }

    .users-primary-btn,
    .users-secondary-btn,
    .users-inline-btn {
        width: 100%;
    }
}







@media (max-width: 1100px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-title {
        font-size: 24px;
    }

    .dashboard-panel,
    .stat-card {
        padding: 18px;
    }
}

@media (max-width: 900px) {
    .sidebar {
        width: 220px;
        min-width: 220px;
    }
}

@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        padding: 14px;
    }

    .nav-scroll {
        overflow: visible;
    }

    .topbar {
        padding: 16px 18px;
        flex-wrap: wrap;
    }

    .page-content {
        padding: 18px;
    }

    .topbar-org-title {
        font-size: 20px;
    }

    .topbar-logo {
        max-width: 130px;
        height: 38px;
    }
}