:root {
    --bg: #08090d;
    --panel: #11131a;
    --panel-dark: #0d0f14;

    --line: #292b35;

    --text: #eeeaf7;
    --muted: #898593;

    --purple: #9228d6;
    --purple-dark: #551575;

    --cyan: #56d7e7;
    --amber: #ffb84a;
    --green: #59dc94;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    color: var(--text);

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(115, 27, 160, .13),
            transparent 28%
        ),
        var(--bg);

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;
}


.portal-shell {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        72px
        1fr;
}


.rail {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 72px;

    padding: 12px 10px;

    background: #07080b;

    border-right:
        1px solid #24252e;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;
}


.logo-mark {
    width: 48px;
    height: 48px;

    border-radius: 14px;

    overflow: hidden;

    margin-bottom: 8px;

    border: 1px solid #5f2878;

    box-shadow:
        0 0 20px
        rgba(146, 40, 214, .18);
}


.logo-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.rail-button {
    width: 48px;
    height: 48px;

    border-radius: 15px;

    border:
        1px solid transparent;

    background: #15161d;

    color: #85818f;

    font-size: 20px;

    text-decoration: none;

    display: grid;
    place-items: center;

    cursor: pointer;
}


.rail-button:hover,
.rail-button.active {
    color: white;

    background: #24132e;

    border-color:
        #5b2973;

    box-shadow:
        inset 3px 0 0
        var(--purple);
}


.workspace {
    grid-column: 2;

    min-width: 0;
}


.topbar {
    height: 92px;

    padding:
        15px
        24px;

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    background:
        rgba(9, 10, 14, .88);

    border-bottom:
        1px solid #262730;

    backdrop-filter:
        blur(10px);
}

.brand-heading {
    display: flex;

    align-items: center;

    gap: 16px;
}


.full-logo {
    width: 135px;
    height: 64px;

    object-fit: contain;

    background: #050609;

    border:
        1px solid #24252e;

    border-radius:
        6px;

    padding:
        4px;

    box-shadow:
        0 0 18px
        rgba(146, 40, 214, .10);
}

.crumb,
.kicker {
    color:
        #a46abc;

    font-size:
        10px;

    letter-spacing:
        .16em;
}


.topbar h1 {
    margin:
        5px
        0
        0;

    font-family:
        Georgia,
        serif;

    font-size:
        26px;
}


.profile-chip {
    display: flex;

    align-items: center;

    gap: 10px;
}


.profile-avatar {
    width: 38px;
    height: 38px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    font-weight:
        800;

    background:
        linear-gradient(
            135deg,
            #3d104e,
            var(--purple)
        );
}


.profile-chip strong,
.profile-chip small {
    display:
        block;
}


.profile-chip small {
    margin-top:
        2px;

    color:
        #777482;

    font-size:
        10px;
}


.subtabs {
    height:
        48px;

    padding:
        0
        24px;

    display:
        flex;

    align-items:
        flex-end;

    background:
        #0c0d12;

    border-bottom:
        1px solid #252731;
}


.subtabs a {
    padding:
        14px
        16px
        12px;

    border:
        0;

    border-bottom:
        2px solid transparent;

    background:
        transparent;

    color:
        #777482;

    font-size:
        11px;

    cursor:
        pointer;
}


.subtabs a.active {
    color:
        white;

    border-bottom-color:
        var(--purple);
    
    text-decoration: none;

    background:
        linear-gradient(
            transparent,
            rgba(146,40,214,.08)
        );
}


.content {
    padding:
        22px
        24px;
}


.stat-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        13px;

    margin-bottom:
        14px;
}


.stat-card {
    min-height:
        105px;

    padding:
        16px;

    background:
        linear-gradient(
            145deg,
            #141620,
            #101117
        );

    border:
        1px solid #2b2c36;

    border-top:
        2px solid #585869;
}


.stat-card.purple {
    border-top-color:
        var(--purple);
}


.stat-card.amber {
    border-top-color:
        var(--amber);
}


.stat-card.cyan {
    border-top-color:
        var(--cyan);
}


.stat-card span {
    color:
        #898694;

    font-size:
        10px;

    letter-spacing:
        .15em;
}


.stat-card strong {
    display:
        block;

    margin:
        8px
        0;

    font-size:
        34px;
}


.stat-card small {
    color:
        #6f6c79;
}


.dashboard-grid {
    display:
        grid;

    grid-template-columns:
        1.6fr
        1fr;

    gap:
        14px;
}


.panel {
    background:
        linear-gradient(
            145deg,
            #12141b,
            #0e1016
        );

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

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.18);
}


.panel.wide {
    min-height:
        360px;
}


.panel.upcoming {
    grid-column:
        1 / -1;
}


.panel-head {
    padding:
        14px
        16px;

    border-bottom:
        1px solid #262731;
}


.panel-head h2 {
    margin:
        3px
        0;

    font-family:
        Georgia,
        serif;

    font-size:
        19px;
}


.ticket-list,
.schedule-list,
.customer-list {
    padding:
        5px
        12px;
}


.ticket-row {
    display:
        grid;

    grid-template-columns:
        90px
        1fr
        120px
        120px;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px
        5px;

    border-bottom:
        1px solid #22232b;
}


.ticket-number {
    color:
        #cf74eb;

    font-family:
        Consolas,
        monospace;

    font-weight:
        700;
}


.ticket-row small,
.schedule-row small,
.customer-row small {
    display:
        block;

    margin-top:
        3px;

    color:
        #706e7c;
}


.job-type,
.ticket-status {
    width:
        max-content;

    padding:
        5px
        7px;

    border-radius:
        3px;

    font-size:
        9px;
}


.job-type {
    color:
        #c483ef;

    border:
        1px solid #353642;
}


.ticket-status {
    color:
        #6ae3a0;

    background:
        #103223;
}


.schedule-row,
.customer-row {
    display:
        grid;

    grid-template-columns:
        75px
        1fr;

    gap:
        10px;

    align-items:
        center;

    padding:
        13px
        4px;

    border-bottom:
        1px solid #23242d;
}


.schedule-row time,
.customer-row time {
    color:
        #c977ef;

    font-family:
        Consolas,
        monospace;

    font-size:
        11px;
}


.empty-state {
    padding:
        25px;

    color:
        #666370;

    text-align:
        center;
}


@media (
    max-width: 900px
) {

    .stat-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }

    .panel.upcoming {
        grid-column:
            auto;
    }
}
.login-page {
    min-height: 100vh;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at center,
            rgba(85, 21, 117, .20),
            transparent 35%
        ),
        #07080b;
}


.login-shell {
    width: min(
        470px,
        92vw
    );

    padding:
        38px;

    background:
        #0d0e14;

    border:
        1px solid #34313d;

    border-top:
        2px solid var(--purple);

    box-shadow:
        0 25px 80px #000,
        0 0 55px
        rgba(146, 40, 214, .15);
}


.login-logo {
    display: block;

    width: 240px;
    max-height: 110px;

    object-fit: contain;

    margin:
        0 auto
        24px;
}


.login-terminal {
    color:
        #a66cbe;

    font-size:
        10px;

    letter-spacing:
        .17em;
}


.login-shell h1 {
    margin:
        8px 0;

    font-family:
        Georgia,
        serif;

    font-size:
        30px;
}


.login-shell p {
    color:
        var(--muted);

    margin-bottom:
        25px;
}


.login-shell form {
    display:
        grid;

    gap:
        16px;
}


.login-shell label {
    color:
        #9f9aa9;

    font-size:
        10px;

    letter-spacing:
        .12em;
}


.login-shell input {
    display:
        block;

    width:
        100%;

    margin-top:
        7px;

    padding:
        13px;

    color:
        white;

    background:
        #090a0f;

    border:
        1px solid #31333d;

    outline:
        none;
}


.login-shell input:focus {
    border-color:
        var(--purple);

    box-shadow:
        0 0 0 2px
        rgba(146, 40, 214, .12);
}


.login-button {
    margin-top:
        4px;

    padding:
        13px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--purple-dark),
            var(--purple)
        );

    border:
        0;

    font-weight:
        800;

    letter-spacing:
        .08em;

    cursor:
        pointer;
}


.login-button:hover {
    filter:
        brightness(1.15);
}


.login-error {
    margin-bottom:
        15px;

    padding:
        10px;

    color:
        #ff99aa;

    background:
        #32131b;

    border:
        1px solid #642533;
}


.login-system {
    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        22px;

    color:
        var(--green);

    font-size:
        10px;
}
.ticket-create-page {
    padding: 24px;
    max-width: 1250px;
    margin: 0 auto;
}

.ticket-create-form {
    display: grid;
    gap: 16px;
}

.form-panel {
    background: linear-gradient(
        145deg,
        #12141b,
        #0d0f14
    );

    border: 1px solid #292b35;
    border-top: 2px solid #6f248f;
}

.form-panel-head {
    padding: 16px 18px;
    border-bottom: 1px solid #292b35;
}

.form-panel-head h2 {
    margin: 4px 0 0;
    font-family: Georgia, serif;
    font-size: 20px;
}

.customer-mode {
    display: flex;
    gap: 12px;
    padding: 18px;
}

.mode-option {
    padding: 10px 14px;
    background: #0a0b10;
    border: 1px solid #343641;
    color: #aaa5b3;
    font-size: 10px;
    letter-spacing: .1em;
    cursor: pointer;
}

.mode-option:has(input:checked) {
    color: white;
    border-color: var(--purple);
    background: #21102b;
}

.mode-option input {
    accent-color: var(--purple);
}

#existing-customer,
.new-customer-fields {
    padding: 0 18px 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 18px;
}

.new-customer-fields .form-grid {
    padding: 0;
    margin-top: 16px;
}

.address-grid {
    grid-template-columns: 2fr 1fr 100px 120px;
}

.field-label {
    color: #8f8a99;
    font-size: 10px;
    letter-spacing: .1em;
}

.field-label input,
.field-label select,
.field-label textarea,
#existing-customer select {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 11px 12px;

    color: #eeeaf7;
    background: #090a0f;

    border: 1px solid #343641;
    outline: none;

    font-family: inherit;
}

.field-label textarea {
    resize: vertical;
}

.field-label input:focus,
.field-label select:focus,
.field-label textarea:focus,
#existing-customer select:focus {
    border-color: var(--purple);

    box-shadow:
        0 0 0 2px
        rgba(146, 40, 214, .12);
}

.wide-field {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    padding: 5px 0 30px;
}

.cancel-button,
.create-ticket-button,
.back-button {
    padding: 11px 16px;

    border: 1px solid #393a45;

    color: #aaa6b3;
    background: #111219;

    text-decoration: none;

    font-size: 10px;
    letter-spacing: .1em;

    cursor: pointer;
}

.create-ticket-button {
    color: white;

    border-color: #702890;

    background:
        linear-gradient(
            135deg,
            #50136d,
            #8e25c6
        );
}

.create-ticket-button:hover {
    filter: brightness(1.15);
}

.back-button:hover,
.cancel-button:hover {
    color: white;
    border-color: #6f248f;
}

.form-error {
    padding: 12px 15px;

    color: #ff9aaa;
    background: #32131b;

    border: 1px solid #642533;
}

@media (max-width: 800px) {

    .form-grid,
    .address-grid {
        grid-template-columns: 1fr;
    }

    .wide-field {
        grid-column: auto;
    }
}
.ticket-page {
    padding: 24px;
}

.ticket-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.ticket-page-head h2 {
    margin: 4px 0 0;
    font-family: Georgia, serif;
    font-size: 25px;
}

.ticket-filters {
    display: grid;
    grid-template-columns: 1fr 180px 180px auto auto;
    gap: 10px;

    padding: 14px;
    margin-bottom: 14px;

    background: #101117;
    border: 1px solid #292b35;
}

.ticket-filters input,
.ticket-filters select {
    padding: 10px 12px;

    color: #eeeaf7;
    background: #090a0f;

    border: 1px solid #343641;
    outline: none;
}

.ticket-filters input:focus,
.ticket-filters select:focus {
    border-color: var(--purple);
}

.ticket-filters button,
.ticket-filters a {
    padding: 10px 14px;

    color: #aaa5b3;
    background: #171820;

    border: 1px solid #393b47;

    text-decoration: none;
    font-size: 10px;
    letter-spacing: .08em;

    cursor: pointer;
}

.ticket-filters button:hover,
.ticket-filters a:hover {
    color: white;
    border-color: var(--purple);
}

.ticket-table-wrap {
    overflow-x: auto;

    background: #101117;
    border: 1px solid #292b35;
}

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

.ticket-table th {
    padding: 12px;

    color: #85818f;
    background: #0c0d12;

    border-bottom: 1px solid #292b35;

    text-align: left;
    font-size: 9px;
    letter-spacing: .12em;
}

.ticket-table td {
    padding: 14px 12px;

    border-bottom: 1px solid #23242d;

    font-size: 12px;
}

.ticket-table tbody tr:hover {
    background: rgba(146, 40, 214, .06);
}

.table-badge {
    padding: 5px 7px;

    border: 1px solid #393b47;

    font-size: 9px;
}

.muted {
    color: #6f6c79;
}

@media (max-width: 900px) {
    .ticket-filters {
        grid-template-columns: 1fr;
    }
}
.ticket-number-link {
    color: #c36cff;
    text-decoration: none;
    font-weight: 700;
}

.ticket-number-link:hover {
    color: #e0a6ff;
    text-shadow:
        0 0 10px
        rgba(195, 108, 255, .45);
}
.ticket-workspace {
    padding: 24px;
}

.ticket-workspace-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}

.ticket-workspace-head h2 {
    margin: 4px 0 10px;

    font-family: Georgia, serif;
    font-size: 28px;
}

.ticket-meta {
    display: flex;
    gap: 8px;
}

.ticket-meta span {
    padding: 5px 8px;

    color: #bbb5c4;
    background: #15161d;

    border: 1px solid #363842;

    font-size: 9px;
    letter-spacing: .08em;
}

.ticket-workspace-actions {
    display: flex;
    gap: 10px;
}

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

.wide-panel {
    grid-column: 1 / -1;
}

.ticket-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;

    background: #252730;
}

.ticket-info-grid > div {
    padding: 14px;

    background: #101117;
}

.ticket-info-grid span,
.service-address span,
.ticket-system-times span,
.work-performed span {
    display: block;

    margin-bottom: 5px;

    color: #777482;

    font-size: 9px;
    letter-spacing: .1em;
}

.ticket-info-grid strong,
.service-address strong,
.ticket-system-times strong {
    font-size: 12px;
}

.service-address {
    padding: 16px;

    border-top: 1px solid #292b35;

    line-height: 1.55;
}

.ticket-system-times {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 1px;

    margin-top: 1px;

    background: #252730;
}

.ticket-system-times > div {
    padding: 14px;
    background: #0c0d12;
}

.ticket-description {
    padding: 18px;

    color: #c9c4cf;

    line-height: 1.65;
}

.ticket-note-list {
    padding: 12px;
}

.ticket-note {
    padding: 14px;
    margin-bottom: 10px;

    background: #0c0e13;

    border: 1px solid #282a33;
    border-left: 2px solid #6f248f;
}

.ticket-note-head {
    display: flex;
    justify-content: space-between;

    margin-bottom: 9px;
}

.ticket-note-head strong {
    color: #c978eb;
}

.ticket-note-head time {
    color: #666370;

    font-family: Consolas, monospace;
    font-size: 10px;
}

.ticket-note p {
    color: #aaa6b2;
    line-height: 1.55;
}

.work-performed {
    margin-top: 12px;
    padding: 10px;

    background: #11131a;

    border: 1px solid #292b35;
}

.note-flags {
    display: flex;
    gap: 8px;

    margin-top: 10px;
}

.note-flags span {
    padding: 4px 7px;

    color: #ffc66e;
    background: #35260f;

    font-size: 8px;
    letter-spacing: .08em;
}

.ticket-note-entry {
    padding: 16px;

    border-top: 1px solid #292b35;
}

.ticket-note-entry textarea {
    width: 100%;
    min-height: 90px;

    margin-top: 10px;
    padding: 11px;

    color: #ddd8e4;
    background: #090a0f;

    border: 1px solid #30323b;

    resize: vertical;
}

.note-entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 10px;
}

.appointment-list {
    padding: 12px;
}

.appointment-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    gap: 12px;

    padding: 13px;

    border-bottom: 1px solid #24262f;
}

.appointment-row strong,
.appointment-row small {
    display: block;
}

.appointment-row small {
    margin-top: 3px;
    color: #777482;
}

.appointment-actions {
    display: flex;
    justify-content: flex-end;

    padding: 14px;

    border-top: 1px solid #292b35;
}

@media (max-width: 900px) {

    .ticket-workspace-grid {
        grid-template-columns: 1fr;
    }

    .wide-panel {
        grid-column: auto;
    }

    .ticket-workspace-head {
        align-items: flex-start;
        flex-direction: column;
    }

}

.locked-customer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;

    background: #292b35;
}

.locked-customer > div {
    padding: 14px;

    background: #0d0f14;
}

.locked-customer span {
    display: block;

    margin-bottom: 5px;

    color: #777482;

    font-size: 9px;
    letter-spacing: .1em;
}

.locked-customer strong {
    font-size: 12px;
}

.locked-note {
    padding: 12px 15px;

    color: #746f7c;

    background: #0a0b10;

    border-top: 1px solid #292b35;

    font-size: 10px;
}

@media (max-width: 900px) {

    .locked-customer {
        grid-template-columns: 1fr 1fr;
    }

}
.note-options {
    display: flex;
    gap: 20px;

    margin-top: 12px;

    color: #9994a2;

    font-size: 9px;
    letter-spacing: .08em;
}

.note-options label {
    cursor: pointer;
}

.note-options input {
    margin-right: 6px;
    accent-color: var(--purple);
}
 .field-page {
    padding: 24px;
}

.field-page-head {
    margin-bottom: 18px;
}

.field-page-head h2 {
    margin: 4px 0 6px;

    font-family: Georgia, serif;
    font-size: 27px;
}

.field-day-grid {
    display: grid;
    gap: 14px;
}

.field-job-card {
    display: grid;
    grid-template-columns: 115px 1fr;

    background:
        linear-gradient(
            145deg,
            #12141b,
            #0d0f14
        );

    border: 1px solid #292b35;
    border-left: 3px solid var(--purple);
}

.field-job-time {
    padding: 20px 16px;

    background: #0a0b10;

    border-right: 1px solid #292b35;

    text-align: center;
}

.field-job-time strong,
.field-job-time small {
    display: block;
}

.field-job-time strong {
    color: #d583f3;

    font-family: Consolas, monospace;
    font-size: 18px;
}

.field-job-time small {
    margin-top: 6px;

    color: #777482;

    font-family: Consolas, monospace;
    font-size: 10px;
}

.field-job-main {
    padding: 16px 18px;
}

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

.field-job-main h3 {
    margin: 10px 0 4px;

    font-family: Georgia, serif;
    font-size: 21px;
}

.field-job-main > p {
    margin: 0 0 12px;

    color: #8d8996;
}

.field-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 14px;
}

.field-job-meta span {
    padding: 5px 7px;

    color: #b8b2c0;
    background: #15161d;

    border: 1px solid #333540;

    font-size: 9px;
    letter-spacing: .07em;
}

.field-job-location,
.field-job-notes {
    margin-top: 12px;
    padding: 11px 12px;

    background: #0b0c11;

    border: 1px solid #292b35;
}

.field-job-location span,
.field-job-notes span {
    display: block;

    margin-bottom: 5px;

    color: #777482;

    font-size: 9px;
    letter-spacing: .1em;
}

.field-job-location strong {
    font-size: 12px;
}

.field-job-notes p {
    margin: 0;

    color: #aaa5b2;

    line-height: 1.5;
}

.field-job-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;

    margin-top: 15px;
}

.field-empty {
    padding: 36px;

    text-align: center;
}

@media (max-width: 720px) {

    .field-job-card {
        grid-template-columns: 1fr;
    }

    .field-job-time {
        border-right: 0;
        border-bottom: 1px solid #292b35;

        text-align: left;
    }

    .field-job-time strong,
    .field-job-time small {
        display: inline-block;
        margin-right: 8px;
    }

}

.quick-links-page {
    padding: 24px;
}

.quick-links-head {
    margin-bottom: 18px;
}

.quick-links-head h2 {
    margin: 4px 0 6px;

    font-family: Georgia, serif;
    font-size: 27px;
}

.quick-links-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.quick-link-group {
    overflow: hidden;
}

.quick-link-list {
    display: grid;
}

.quick-link-row {
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: 12px;

    align-items: center;

    padding: 14px 16px;

    color: #ddd8e4;
    text-decoration: none;

    border-bottom: 1px solid #24262e;
}

.quick-link-row:hover {
    background: rgba(146, 40, 214, .07);
}

.quick-link-row strong,
.quick-link-row small {
    display: block;
}

.quick-link-row small {
    margin-top: 4px;

    color: #777482;
}

.quick-link-row > span {
    color: #c879eb;

    font-size: 18px;

    text-align: right;
}

@media (max-width: 850px) {

    .quick-links-groups {
        grid-template-columns: 1fr;
    }

}
.calendar-page {
    padding: 24px;
}

.calendar-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.calendar-page-head h2 {
    margin: 4px 0 0;

    font-family: Georgia, serif;
    font-size: 28px;
}

.calendar-nav {
    display: flex;
    gap: 8px;
}

.calendar-nav a {
    padding: 9px 12px;

    color: #aaa5b3;
    background: #111219;

    border: 1px solid #343641;

    text-decoration: none;

    font-size: 9px;
    letter-spacing: .08em;
}

.calendar-nav a:hover {
    color: white;
    border-color: var(--purple);
}

.month-calendar {
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    background: #0a0b10;

    border-bottom:
        1px solid #292b35;
}

.calendar-weekdays div {
    padding: 11px;

    color: #777482;

    font-size: 9px;
    letter-spacing: .12em;

    text-align: center;
}

.calendar-month-grid {
    display: grid;

    grid-template-columns:
        repeat(7, 1fr);
}

.calendar-day {
    min-height: 145px;

    padding: 9px;

    background: #101117;

    border-right:
        1px solid #24262e;

    border-bottom:
        1px solid #24262e;
}

.calendar-empty-day {
    background: #0b0c11;
}

.calendar-today {
    background:
        linear-gradient(
            145deg,
            rgba(85,21,117,.20),
            #101117
        );

    box-shadow:
        inset 0 0 0 1px
        #6b2788;
}

.calendar-day-number {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 8px;

    color: #8e8998;

    font-family:
        Consolas,
        monospace;

    font-size: 11px;
}

.calendar-day-number span {
    color: #c978eb;

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    font-size: 7px;
    letter-spacing: .1em;
}

.calendar-events {
    display: grid;
    gap: 6px;
}

.calendar-event {
    display: block;

    padding: 7px 8px;

    color: #ddd8e4;
    background: #1a1220;

    border-left:
        2px solid var(--purple);

    text-decoration: none;
}

.calendar-event:hover {
    background: #24162c;
}

.calendar-event time,
.calendar-event strong,
.calendar-event small {
    display: block;
}

.calendar-event time {
    color: #c979eb;

    font-family:
        Consolas,
        monospace;

    font-size: 9px;
}

.calendar-event strong {
    margin-top: 3px;

    font-size: 10px;
}

.calendar-event small {
    margin-top: 3px;

    color: #706d79;

    font-size: 8px;
}

@media (max-width: 900px) {

    .calendar-month-grid,
    .calendar-weekdays {
        min-width: 850px;
    }

    .month-calendar {
        overflow-x: auto;
    }

    .calendar-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

}
.week-calendar {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(150px, 1fr));

    gap: 1px;

    background: #292b35;

    border: 1px solid #292b35;

    overflow-x: auto;
}

.week-day {
    min-height: 500px;

    background: #0e1015;
}

.week-today {
    background:
        linear-gradient(
            180deg,
            rgba(92, 29, 124, .20),
            #0e1015 170px
        );

    box-shadow:
        inset 0 0 0 1px
        #682686;
}

.week-day-head {
    position: relative;

    padding: 14px;

    background: #0a0b10;

    border-bottom:
        1px solid #292b35;
}

.week-day-head span,
.week-day-head strong,
.week-day-head small {
    display: block;
}

.week-day-head span {
    color: #777482;

    font-size: 9px;
    letter-spacing: .12em;
}

.week-day-head strong {
    margin-top: 4px;

    color: #d8d3df;

    font-family: Georgia, serif;
    font-size: 24px;
}

.week-day-head small {
    margin-top: 4px;

    color: #c978eb;

    font-size: 8px;
    letter-spacing: .1em;
}

.week-day-events {
    display: grid;

    align-content: start;

    gap: 8px;

    padding: 8px;
}

.week-event {
    display: block;

    padding: 10px;

    color: #d9d4df;

    background: #15121a;

    border: 1px solid #29242e;
    border-left: 2px solid var(--purple);

    text-decoration: none;
}

.week-event:hover {
    background: #201626;

    border-color: #4d315a;
}

.week-event time {
    display: block;

    color: #c978eb;

    font-family: Consolas, monospace;
    font-size: 10px;
}

.week-event > strong {
    display: block;

    margin-top: 6px;

    font-size: 11px;
}

.week-event > span {
    display: block;

    margin-top: 3px;

    color: #898491;

    font-family: Consolas, monospace;
    font-size: 9px;
}

.week-event > small {
    display: block;

    margin-top: 7px;

    color: #77727f;

    line-height: 1.4;
}

.week-event-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: 9px;
}

.week-event-meta span {
    padding: 3px 5px;

    color: #aaa5b2;

    background: #0d0e13;

    border: 1px solid #302d35;

    font-size: 7px;
    letter-spacing: .05em;
}

.week-technician {
    margin-top: 9px;

    color: #716d78;

    font-size: 8px;
}

.week-no-jobs {
    padding: 18px 5px;

    color: #4f4c55;

    font-size: 8px;
    letter-spacing: .1em;

    text-align: center;
}

@media (max-width: 1100px) {

    .week-calendar {
        grid-template-columns:
            repeat(7, 170px);
    }

}

.staff-page {
    padding: 24px;
}

.staff-page-head {
    margin-bottom: 18px;
}

.staff-page-head h2 {
    margin: 4px 0 6px;

    font-family: Georgia, serif;
    font-size: 28px;
}

.staff-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(250px, 1fr)
        );

    gap: 14px;
}

.staff-directory-card {
    padding: 22px;

    color: #ddd8e4;

    background:
        linear-gradient(
            145deg,
            #13151d,
            #0e1016
        );

    border: 1px solid #292b35;

    text-align: center;
    text-decoration: none;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.staff-directory-card:hover {
    border-color: #63287e;

    background:
        linear-gradient(
            145deg,
            #18131e,
            #101117
        );
}

.staff-avatar {
    width: 82px;
    height: 82px;

    margin: 0 auto 14px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #3d104e,
            var(--purple)
        );

    border: 2px solid #5d2676;

    font-size: 20px;
    font-weight: 800;
}

.staff-directory-card h3 {
    margin: 6px 0 8px;

    font-family: Georgia, serif;
    font-size: 20px;
}

.staff-role {
    display: inline-block;

    padding: 5px 8px;

    color: #c77ce8;

    background: #25132f;

    border: 1px solid #512665;

    font-size: 8px;
    letter-spacing: .1em;
}

.staff-directory-card > p {
    min-height: 20px;

    color: #817d8a;

    font-size: 11px;
}

.staff-card-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top: 17px;
    padding-top: 15px;

    border-top:
        1px solid #292b35;
}

.staff-card-stats strong,
.staff-card-stats span {
    display: block;
}

.staff-card-stats strong {
    color: #eeeaf7;

    font-size: 17px;
}

.staff-card-stats span {
    margin-top: 4px;

    color: #666370;

    font-size: 7px;
    letter-spacing: .08em;
}
.employee-profile-page {
    padding: 24px;
}

.employee-profile-actions {
    margin-bottom: 14px;
}

.employee-profile-header {
    display: grid;

    grid-template-columns:
        130px 1fr minmax(250px, 320px);

    gap: 24px;

    align-items: center;

    padding: 24px;
}

.employee-profile-avatar {
    width: 110px;
    height: 110px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #351044,
            var(--purple)
        );

    border: 2px solid #642981;
}

.employee-profile-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.employee-profile-avatar span {
    color: white;

    font-size: 28px;
    font-weight: 800;
}

.employee-profile-identity h2 {
    margin: 5px 0;

    font-family: Georgia, serif;
    font-size: 29px;
}

.employee-profile-identity p {
    margin: 0 0 10px;

    color: #918c9b;
}

.employee-active-status {
    color: #7dc990;

    font-size: 8px;
    letter-spacing: .12em;
}

.employee-inactive-status {
    color: #c77b7b;

    font-size: 8px;
    letter-spacing: .12em;
}

.employee-contact {
    display: grid;

    gap: 10px;
}

.employee-contact div {
    padding: 10px 12px;

    background: #0b0c11;

    border: 1px solid #292b35;
}

.employee-contact span,
.employee-contact strong {
    display: block;
}

.employee-contact span {
    margin-bottom: 4px;

    color: #666370;

    font-size: 8px;
    letter-spacing: .1em;
}

.employee-contact strong {
    color: #c9c4d0;

    font-size: 11px;
}

.employee-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 14px;
}

.employee-stat-card {
    padding: 17px;

    background: #111219;

    border: 1px solid #292b35;

    text-align: center;
}

.employee-stat-card span,
.employee-stat-card strong,
.employee-stat-card small {
    display: block;
}

.employee-stat-card span {
    color: #706c79;

    font-size: 8px;
    letter-spacing: .1em;
}

.employee-stat-card strong {
    margin: 6px 0;

    color: #d88bf4;

    font-family: Georgia, serif;
    font-size: 27px;
}

.employee-stat-card small {
    color: #56535d;

    font-size: 7px;
    letter-spacing: .08em;
}

.employee-profile-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;

    margin-top: 14px;
}

.employee-job-list {
    display: grid;
}

.employee-job-row,
.employee-ticket-row {
    display: grid;

    gap: 12px;

    padding: 13px 15px;

    color: #d7d2dc;

    border-bottom: 1px solid #252730;

    text-decoration: none;
}

.employee-job-row {
    grid-template-columns:
        90px 1fr;
}

.employee-ticket-row {
    grid-template-columns:
        130px 1fr;
}

.employee-job-row:hover,
.employee-ticket-row:hover {
    background: #17131c;
}

.employee-job-row strong,
.employee-job-row span,
.employee-ticket-row strong,
.employee-ticket-row span {
    display: block;
}

.employee-job-row span,
.employee-ticket-row span {
    margin-top: 3px;

    color: #77727f;

    font-size: 9px;
}

.employee-job-date strong {
    color: #c979eb;
}

.employee-empty {
    padding: 25px;

    color: #66626d;

    text-align: center;

    font-size: 10px;
    letter-spacing: .08em;
}

@media (max-width: 850px) {

    .employee-profile-header {
        grid-template-columns: 1fr;
    }

    .employee-profile-grid {
        grid-template-columns: 1fr;
    }

    .employee-stat-grid {
        grid-template-columns: 1fr;
    }

}
.messages-page {
    padding: 24px;
}

.messages-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.messages-head h2 {
    margin: 4px 0 6px;

    font-family: Georgia, serif;
    font-size: 28px;
}

.message-tabs {
    display: flex;
    gap: 6px;

    margin-bottom: 10px;
}

.message-tabs a {
    padding: 8px 13px;

    color: #777482;
    background: #0d0e13;

    border: 1px solid #292b35;

    text-decoration: none;

    font-size: 8px;
    letter-spacing: .1em;
}

.message-tabs a:hover,
.message-tabs a.active {
    color: #d58aef;

    border-color: #59266e;

    background: #18101e;
}

.message-list {
    overflow: hidden;
}

.message-row {
    display: grid;

    grid-template-columns:
        20px
        minmax(150px, 220px)
        1fr
        140px;

    gap: 12px;

    align-items: center;

    padding: 14px 16px;

    color: #c7c2cd;

    border-bottom: 1px solid #252730;

    text-decoration: none;
}

.message-row:hover {
    background: #151219;
}

.message-unread {
    background:
        linear-gradient(
            90deg,
            rgba(104, 35, 135, .15),
            #101117 300px
        );
}

.unread-dot {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #c56ee9;

    box-shadow:
        0 0 8px
        rgba(197, 110, 233, .5);
}

.message-sender strong,
.message-sender span,
.message-preview strong,
.message-preview span {
    display: block;
}

.message-sender strong,
.message-preview strong {
    font-size: 11px;
}

.message-sender span,
.message-preview span {
    margin-top: 3px;

    color: #77727f;

    font-size: 9px;
}

.message-row time {
    color: #66626e;

    font-family: Consolas, monospace;
    font-size: 8px;

    text-align: right;
}

.message-empty {
    padding: 50px 20px;

    text-align: center;
}

.message-empty h3 {
    margin-top: 8px;

    color: #77727f;

    font-family: Georgia, serif;
}

@media (max-width: 800px) {

    .messages-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .message-row {
        grid-template-columns:
            15px 1fr;
    }

    .message-preview,
    .message-row time {
        grid-column: 2;
    }

    .message-row time {
        text-align: left;
    }

}
.message-detail-card {
    overflow: hidden;
}

.message-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    background: #292b35;

    border-bottom: 1px solid #292b35;
}

.message-detail-meta div {
    padding: 14px 16px;
    background: #0d0e13;
}

.message-detail-meta span,
.message-detail-meta strong {
    display: block;
}

.message-detail-meta span {
    margin-bottom: 5px;

    color: #666370;

    font-size: 8px;
    letter-spacing: .1em;
}

.message-detail-meta strong {
    color: #c9c4d0;
    font-size: 11px;
}

.message-detail-subject {
    padding: 20px;

    border-bottom: 1px solid #292b35;
}

.message-detail-subject span {
    color: #77727f;

    font-size: 8px;
    letter-spacing: .1em;
}

.message-detail-subject h2 {
    margin: 5px 0 0;

    font-family: Georgia, serif;
    font-size: 23px;
}

.message-detail-body {
    min-height: 200px;

    padding: 24px;

    color: #c8c3ce;

    font-size: 12px;
    line-height: 1.7;
}

@media (max-width: 700px) {

    .message-detail-meta {
        grid-template-columns: 1fr;
    }

}
.message-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 16px;

    border-top: 1px solid #292b35;
}

.message-detail-actions form {
    margin: 0;
}

.message-delete-button {
    padding: 11px 16px;

    color: #ff9aaa;
    background: #241014;

    border: 1px solid #5c252d;

    font-size: 10px;
    letter-spacing: .08em;

    cursor: pointer;
}

.message-delete-button:hover {
    color: white;
    border-color: #a84755;
}

.rail-button {
    position: relative;
}

.rail-badge {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #8f2cc4;
    color: #ffffff;

    border: 1px solid #d58aef;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 0 10px
        rgba(197, 110, 233, .45);
}
.management-page {
    padding: 24px;
}

.management-head {
    margin-bottom: 18px;
}

.management-head h2 {
    margin: 4px 0 6px;

    font-family: Georgia, serif;
    font-size: 28px;
}

.management-table-wrap {
    overflow-x: auto;
}

.management-table {
    width: 100%;

    border-collapse: collapse;
}

.management-table th {
    padding: 12px;

    color: #777482;
    background: #0b0c11;

    border-bottom: 1px solid #292b35;

    text-align: left;

    font-size: 8px;
    letter-spacing: .1em;
}

.management-table td {
    padding: 14px 12px;

    border-bottom: 1px solid #252730;

    font-size: 11px;
}

.management-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.management-actions form {
    margin: 0;
}

.management-toggle-button {
    padding: 8px 10px;

    color: #d4ceda;
    background: #16171e;

    border: 1px solid #3a3c47;

    font-size: 8px;
    letter-spacing: .08em;

    cursor: pointer;
}

.management-toggle-button:hover {
    border-color: #8b4da6;
}

.management-delete-link {
    padding: 8px 10px;

    color: #ff9aaa;
    background: #241014;

    border: 1px solid #5c252d;

    text-decoration: none;

    font-size: 8px;
    letter-spacing: .08em;
}
.customer-page,
.customer-detail-page {
    padding: 24px;
}

.customer-page-head {
    margin-bottom: 18px;
}

.customer-page-head h2 {
    margin: 4px 0 0;

    font-family: Georgia, serif;
    font-size: 28px;
}

.customer-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: 14px;

    margin-top: 16px;
}

.customer-card {
    padding: 18px;

    color: #d8d3df;

    background:
        linear-gradient(
            145deg,
            #13151c,
            #0e1015
        );

    border: 1px solid #292b35;

    text-decoration: none;
}

.customer-card:hover {
    border-color: #65317c;
}

.customer-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.customer-card h3 {
    margin: 5px 0 0;

    font-family: Georgia, serif;
    font-size: 20px;
}

.customer-card-info {
    display: grid;

    gap: 6px;

    margin-top: 15px;

    color: #85818d;

    font-size: 10px;
}

.customer-card-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 16px;
    padding-top: 12px;

    color: #716d79;

    border-top: 1px solid #292b35;

    font-size: 8px;
    letter-spacing: .08em;
}

.customer-profile-header {
    display: grid;
    grid-template-columns:
        1fr minmax(270px, 360px);

    gap: 24px;

    padding: 22px;
}

.customer-profile-header h2 {
    margin: 5px 0;

    font-family: Georgia, serif;
    font-size: 29px;
}

.customer-address-panel,
.customer-notes-panel,
.customer-history-panel {
    margin-top: 14px;
    padding: 18px;
}

.customer-address-panel h3 {
    color: #c9c4d0;

    font-size: 14px;
    line-height: 1.6;
}

.customer-notes-panel p {
    color: #aaa5b1;

    line-height: 1.6;
}

@media (max-width: 800px) {

    .customer-profile-header {
        grid-template-columns: 1fr;
    }

}