/* ASPIRIN SCHEDULE V3 */

.a3-controls {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-bottom:12px;
}

.a3-mode {
    height:44px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    color:var(--muted);
    font-weight:800;
    font-size:12px;
}

.a3-mode.active {
    background:var(--accent);
    color:#080908;
    border-color:var(--accent);
}

.a3-period {
    display:grid;
    grid-template-columns:43px 1fr 43px;
    gap:8px;
    align-items:center;
    margin-bottom:12px;
}

.a3-arrow {
    width:43px;
    height:43px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    color:white;
    font-size:20px;
}

.a3-period-center {
    text-align:center;
}

.a3-period-main {
    font-size:18px;
    font-weight:900;
}

.a3-period-sub {
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
}

.a3-main-actions {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-bottom:15px;
}

.a3-add {
    height:52px;
    border:0;
    border-radius:17px;
    background:var(--accent);
    color:#090a0c;
    font-weight:900;
    font-size:13px;
}

.a3-today {
    height:52px;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--card);
    color:white;
    font-weight:800;
    font-size:11px;
}

.a3-state {
    padding:25px 16px;
    border:1px solid var(--line);
    border-radius:21px;
    background:var(--card);
    color:var(--muted);
    text-align:center;
    font-size:12px;
}

.a3-day {
    margin-bottom:10px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:21px;
    background:rgba(255,255,255,.03);
}

.a3-day-head {
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.a3-day-number {
    width:44px;
    height:44px;
    min-width:44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    font-size:18px;
    font-weight:900;
}

.a3-day-number.today {
    background:var(--accent);
    color:#090a0c;
}

.a3-day-name {
    flex:1;
    font-size:13px;
    font-weight:850;
}

.a3-day-date {
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
}

.a3-count {
    color:var(--muted);
    font-size:10px;
}

.a3-records {
    padding:8px;
}

.a3-empty {
    padding:14px;
    color:#747982;
    font-size:11px;
}

.a3-record {
    margin-bottom:7px;
    padding:13px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:17px;
    background:rgba(255,255,255,.05);
}

.a3-record:last-child {
    margin-bottom:0;
}

.a3-record.in_progress {
    border-color:rgba(255,204,77,.30);
}

.a3-record.done {
    border-color:rgba(90,225,140,.30);
}

.a3-record.no_show {
    opacity:.78;
    border-color:rgba(255,112,112,.30);
}

.a3-record-line {
    display:flex;
    align-items:flex-start;
    gap:9px;
}

.a3-time {
    min-width:max-content;
    color:var(--accent);
    font-size:12px;
    font-weight:900;
}

.a3-client {
    flex:1;
    min-width:0;
    font-size:14px;
    font-weight:900;
}

.a3-status {
    padding:5px 7px;
    border-radius:9px;
    background:rgba(255,255,255,.07);
    color:#999da5;
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

.a3-status.in_progress {
    color:#ffd45f;
    background:rgba(255,204,77,.10);
}

.a3-status.done {
    color:#6ce59b;
    background:rgba(90,225,140,.10);
}

.a3-status.no_show {
    color:#ff9a9a;
    background:rgba(255,112,112,.10);
}

.a3-car,
.a3-services {
    margin-top:7px;
    color:var(--muted);
    font-size:10px;
    line-height:1.4;
}

.a3-actions {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
    margin-top:11px;
}

.a3-action {
    min-height:38px;
    padding:6px;
    border:1px solid var(--line);
    border-radius:11px;
    background:rgba(255,255,255,.04);
    color:white;
    font-size:9px;
    font-weight:800;
}

.a3-action.active-work {
    color:#ffd45f;
    border-color:rgba(255,204,77,.3);
    background:rgba(255,204,77,.08);
}

.a3-action.active-done {
    color:#6ce59b;
    border-color:rgba(90,225,140,.3);
    background:rgba(90,225,140,.08);
}

.a3-action.delete {
    color:#ff7777;
}

.a3-month-head,
.a3-month {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
}

.a3-weekday {
    padding:5px 0;
    text-align:center;
    color:#747982;
    font-size:8px;
    font-weight:800;
}

.a3-month-cell {
    position:relative;
    min-height:59px;
    padding:7px 5px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.035);
    color:white;
    text-align:left;
}

.a3-month-cell.blank {
    opacity:.15;
}

.a3-month-cell.today {
    border-color:rgba(217,255,67,.35);
}

.a3-month-badge {
    position:absolute;
    right:5px;
    bottom:5px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--accent);
    color:#080908;
    font-size:8px;
    font-weight:950;
}


/* FORM */

.a3-modal {
    position:fixed;
    inset:0;
    z-index:2600;
    display:none;
    align-items:flex-end;
    background:rgba(0,0,0,.67);
    backdrop-filter:blur(8px);
}

.a3-modal.visible {
    display:flex;
}

.a3-sheet {
    width:100%;
    max-height:93vh;
    overflow:auto;
    padding:
        20px
        16px
        calc(24px + env(safe-area-inset-bottom));
    border-radius:27px 27px 0 0;
    background:#111316;
    border-top:1px solid var(--line);
}

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

.a3-sheet-title {
    font-size:21px;
    font-weight:900;
}

.a3-close {
    width:40px;
    height:40px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--card);
    color:white;
    font-size:18px;
}

.a3-field {
    margin-bottom:13px;
}

.a3-label {
    margin:0 0 6px 3px;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
}

.a3-input,
.a3-textarea,
.a3-select {
    width:100%;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.055);
    color:white;
    outline:none;
    font:inherit;
    font-size:13px;
}

.a3-input,
.a3-select {
    height:48px;
    padding:0 12px;
}

.a3-textarea {
    min-height:82px;
    padding:12px;
    resize:vertical;
}

.a3-row {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px;
}

.a3-contact-row {
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;
}

.a3-contact {
    min-width:92px;
    border:1px solid rgba(217,255,67,.25);
    border-radius:14px;
    background:rgba(217,255,67,.08);
    color:var(--accent);
    font-size:10px;
    font-weight:850;
}

.a3-end-actual {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:44px;
    margin-top:7px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:13px;
    color:var(--muted);
    font-size:11px;
}

.a3-end-actual input {
    accent-color:var(--accent);
}

.a3-plate {
    text-transform:uppercase;
}

.a3-service-pick {
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:6px;
}

.a3-service-add {
    width:45px;
    border:0;
    border-radius:13px;
    background:var(--accent);
    color:#080908;
    font-size:20px;
    font-weight:900;
}

.a3-selected {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}

.a3-chip {
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border-radius:11px;
    background:rgba(217,255,67,.09);
    color:#dfff6d;
    font-size:9px;
    font-weight:800;
}

.a3-chip button {
    border:0;
    background:none;
    color:#dfff6d;
    padding:0;
}

.a3-create-service {
    margin-top:8px;
    border:1px dashed rgba(255,255,255,.13);
    border-radius:14px;
    padding:10px;
}

.a3-service-new-toggle {
    border:0;
    background:none;
    color:var(--accent);
    padding:0;
    font-size:10px;
    font-weight:850;
}

.a3-service-new-box {
    display:none;
    margin-top:10px;
}

.a3-service-new-box.visible {
    display:block;
}

.a3-save-service {
    width:100%;
    height:42px;
    border:0;
    border-radius:13px;
    background:rgba(217,255,67,.12);
    color:var(--accent);
    font-size:10px;
    font-weight:850;
}

.a3-save {
    width:100%;
    height:55px;
    margin-top:6px;
    border:0;
    border-radius:17px;
    background:var(--accent);
    color:#080908;
    font-size:13px;
    font-weight:900;
}

/* =========================================================
   ASPIRIN SERVICES V4
   ========================================================= */

.a3-service-pick,
.a3-selected {
    display: none !important;
}

.a4-services {
    display: grid;
    gap: 13px;
    margin-top: 8px;
}

.a4-group {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    padding: 11px;
}

.a4-group-title {
    margin: 0 2px 9px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.a4-service-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 7px;
}

.a4-service {
    position: relative;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
}

.a4-service.selected {
    border-color: rgba(217,255,67,.48);
    background: rgba(217,255,67,.11);
}

.a4-service-main {
    width: 100%;
    min-height: 65px;
    padding: 12px 10px 28px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.3;
}

.a4-service.selected .a4-service-main {
    color: var(--accent);
}

.a4-service-check {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 11px;
    color: var(--accent);
}

.a4-service-tools {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.a4-tool {
    width: 25px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.07);
    color: #aaaeb5;
    font-size: 10px;
}

.a4-tool.delete {
    color: #ff7777;
}

.a4-no-services {
    padding: 15px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
    font-size: 10px;
}

.a4-editor-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    margin-top: 8px;
}

.a4-cancel-edit {
    display: none;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--card);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.a4-cancel-edit.visible {
    display: block;
}


/* STATUS V4 */

.a4-status-action {
    grid-column: 1 / -1;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 900;
}

.a4-status-action.start {
    color: #ffd45f;
    border-color: rgba(255,204,77,.28);
    background: rgba(255,204,77,.07);
}

.a4-status-action.finish {
    color: #6ce59b;
    border-color: rgba(90,225,140,.30);
    background: rgba(90,225,140,.08);
}

.a4-status-action.no-show {
    color: #ff9a9a;
    border-color: rgba(255,112,112,.30);
    background: rgba(255,112,112,.08);
}

.a4-status-action.reopen {
    color: #aeb2ba;
}


/* CONTACT BUTTON STATE */

.a4-contact-unavailable {
    opacity: .65;
}

@media (max-width: 390px) {

    .a4-service-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   ASPIRIN SCHEDULE V5
   COLLAPSIBLE SERVICES + RECORD CARD + RECEPTION
   ========================================================= */


/* ---------- SERVICE GROUP ACCORDION ---------- */

.a5-group {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    overflow: hidden;
}

.a5-group + .a5-group {
    margin-top: 9px;
}

.a5-group-head {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
}

.a5-group-name {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.a5-group-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
}

.a5-group-count.selected {
    background: rgba(217,255,67,.13);
    color: var(--accent);
}

.a5-group-arrow {
    color: var(--muted);
    font-size: 14px;
    transition: transform .2s ease;
}

.a5-group.open .a5-group-arrow {
    transform: rotate(180deg);
}

.a5-group-body {
    display: none;
    padding: 0 10px 10px;
}

.a5-group.open .a5-group-body {
    display: block;
}

.a5-group .a4-service-grid {
    margin-top: 0;
}


/* ---------- VIEW CARD BUTTONS ---------- */

.a5-card-open {
    color: #dfff6d;
}

.a5-reception {
    color: #8fdcff;
}


/* ---------- RECORD VIEW MODAL ---------- */

.a5-view-modal {
    position: fixed;
    inset: 0;
    z-index: 2700;
    display: none;
    align-items: flex-end;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.a5-view-modal.visible {
    display: flex;
}

.a5-view-sheet {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding:
        20px
        16px
        calc(24px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    border-top: 1px solid var(--line);
    background: #111316;
}

.a5-view-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.a5-view-head-main {
    flex: 1;
    min-width: 0;
}

.a5-view-kicker {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.a5-view-title {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.035em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.a5-view-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--card);
    color: white;
    font-size: 18px;
}

.a5-view-status {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 7px 10px;
    border-radius: 11px;
    background: rgba(255,255,255,.06);
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
}

.a5-view-status.in_progress {
    background: rgba(255,204,77,.11);
    color: #ffd45f;
}

.a5-view-status.done {
    background: rgba(90,225,140,.11);
    color: #6ce59b;
}

.a5-view-status.no_show {
    background: rgba(255,112,112,.11);
    color: #ff9a9a;
}

.a5-info-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
}

.a5-info {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.04);
}

.a5-info.full {
    grid-column: 1 / -1;
}

.a5-info-label {
    margin-bottom: 5px;
    color: #767b84;
    font-size: 9px;
    font-weight: 800;
}

.a5-info-value {
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.a5-view-actions {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    margin-top: 15px;
}

.a5-view-action {
    min-height: 47px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    color: var(--text);
    font-size: 10px;
    font-weight: 850;
}

.a5-view-action.primary {
    border: 0;
    background: var(--accent);
    color: #080908;
}

.a5-view-action.no-show {
    border-color: rgba(255,112,112,.30);
    background: rgba(255,112,112,.08);
    color: #ff9a9a;
}

.a5-view-action.reception {
    border-color: rgba(100,195,255,.25);
    background: rgba(100,195,255,.07);
    color: #9edbff;
}

.a5-view-action.full {
    grid-column: 1 / -1;
}


/* ---------- RECEPTION SCREEN ---------- */

.a5-reception-empty {
    padding: 30px 20px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: var(--card);
    text-align: center;
}

.a5-reception-empty-icon {
    font-size: 38px;
}

.a5-reception-empty-title {
    margin-top: 13px;
    font-size: 18px;
    font-weight: 900;
}

.a5-reception-empty-text {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.a5-reception-card {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(217,255,67,.07),
            transparent 35%
        ),
        rgba(255,255,255,.035);
}

.a5-reception-car {
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.035em;
}

.a5-reception-plate {
    margin-top: 5px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.a5-reception-client {
    margin-top: 14px;
    color: var(--muted);
    font-size: 11px;
}

.a5-reception-block {
    margin-top: 13px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.035);
}

.a5-reception-label {
    margin-bottom: 5px;
    color: #767b84;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.a5-reception-value {
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-line;
}

.a5-reception-next {
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    border: 0;
    border-radius: 17px;
    background: var(--accent);
    color: #080908;
    font-size: 12px;
    font-weight: 900;
}