/* =========================================================
   ASPIRIN UI V148
   RECEPTION JOURNAL
   ========================================================= */


/* ---------------------------------------------------------
   Верхняя карточка конкретной приёмки
   --------------------------------------------------------- */

.a145-summary {
    position:relative;
}

.a148-clickable-summary {
    cursor:pointer;

    padding-right:58px !important;

    transition:
        transform .12s ease,
        border-color .12s ease;
}

.a148-clickable-summary:active {
    transform:
        scale(.992);

    border-color:
        rgba(217,255,67,.28);
}

.a148-open-card {
    position:absolute;

    top:14px;
    right:14px;

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

    min-width:38px;
    height:38px;

    padding:0 10px;

    border-radius:12px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.07);

    color:#b3b7be;

    font-size:9px;
    font-weight:850;
}


/* ---------------------------------------------------------
   Статус приёмки
   --------------------------------------------------------- */

.a148-workflow {
    padding:11px;

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

    border-radius:17px;

    background:
        rgba(255,255,255,.028);
}

.a148-workflow-title {
    margin-bottom:8px;

    color:#81858d;

    font-size:8px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.05em;
}

.a148-workflow-row {
    display:flex;
    gap:6px;

    overflow-x:auto;

    scrollbar-width:none;
}

.a148-workflow-row::-webkit-scrollbar {
    display:none;
}

.a148-workflow-btn {
    flex:1 0 auto;

    min-height:38px;

    padding:0 11px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:11px;

    background:
        rgba(255,255,255,.035);

    color:#858a92;

    font-size:9px;
    font-weight:850;
}

.a148-workflow-btn.active-wait {
    border-color:
        rgba(190,194,201,.22);

    background:
        rgba(190,194,201,.09);

    color:#d2d5da;
}

.a148-workflow-btn.active-progress {
    border-color:
        rgba(255,205,70,.25);

    background:
        rgba(255,205,70,.10);

    color:#ffd45c;
}

.a148-workflow-btn.active-done {
    border-color:
        rgba(90,225,140,.23);

    background:
        rgba(90,225,140,.10);

    color:#6ce49b;
}


/* ---------------------------------------------------------
   Журнал
   --------------------------------------------------------- */

.a148-journal {
    display:grid;
    gap:12px;

    padding-bottom:30px;
}

.a148-journal-head {
    padding:
        2px 0 3px;
}

.a148-journal-title {
    font-size:26px;
    font-weight:950;
    line-height:1.05;
}

.a148-journal-subtitle {
    margin-top:6px;

    color:#858991;

    font-size:10px;
    line-height:1.45;
}


/* ---------------------------------------------------------
   Search
   --------------------------------------------------------- */

.a148-search {
    position:relative;
}

.a148-search-icon {
    position:absolute;

    left:14px;
    top:50%;

    transform:
        translateY(-50%);

    color:#777c84;

    font-size:14px;

    pointer-events:none;
}

.a148-search-input {
    width:100%;
    height:49px;

    padding:
        0 14px
        0 42px;

    box-sizing:border-box;

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

    border-radius:15px;

    outline:none;

    background:
        rgba(255,255,255,.035);

    color:white;

    font:inherit;
    font-size:11px;
}

.a148-search-input:focus {
    border-color:
        rgba(217,255,67,.27);
}


/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.a148-filters {
    display:flex;
    gap:7px;

    overflow-x:auto;

    padding:
        1px 0 3px;

    scrollbar-width:none;
}

.a148-filters::-webkit-scrollbar {
    display:none;
}

.a148-filter {
    flex:0 0 auto;

    min-height:38px;

    padding:
        0 12px;

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

    border-radius:12px;

    background:
        rgba(255,255,255,.03);

    color:#858991;

    font-size:9px;
    font-weight:850;
}

.a148-filter.active {
    border-color:
        rgba(217,255,67,.25);

    background:
        rgba(217,255,67,.10);

    color:var(--accent);
}


/* ---------------------------------------------------------
   Counter
   --------------------------------------------------------- */

.a148-result-head {
    display:flex;
    align-items:center;

    min-height:25px;

    color:#7e8289;

    font-size:9px;
}

.a148-result-count {
    margin-left:auto;

    padding:
        5px 8px;

    border-radius:8px;

    background:
        rgba(255,255,255,.04);

    color:#999da4;

    font-weight:850;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.a148-list {
    display:grid;
    gap:9px;
}

.a148-card {
    position:relative;

    padding:14px;

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

    border-radius:19px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(217,255,67,.055),
            transparent 36%
        ),
        rgba(255,255,255,.028);

    cursor:pointer;

    transition:
        transform .12s ease,
        border-color .12s ease;
}

.a148-card:active {
    transform:
        scale(.992);

    border-color:
        rgba(217,255,67,.25);
}

.a148-card-top {
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.a148-card-main {
    flex:1;

    min-width:0;
}

.a148-car {
    overflow:hidden;

    color:white;

    font-size:16px;
    font-weight:900;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.a148-plate {
    margin-top:3px;

    color:var(--accent);

    font-size:11px;
    font-weight:900;
}

.a148-reception-status {
    flex:0 0 auto;

    padding:
        7px 9px;

    border-radius:10px;

    font-size:8px;
    font-weight:900;

    white-space:nowrap;
}

.a148-reception-status.wait {
    background:
        rgba(190,194,201,.08);

    color:#b6bac1;
}

.a148-reception-status.progress {
    background:
        rgba(255,205,70,.10);

    color:#ffd45c;
}

.a148-reception-status.done {
    background:
        rgba(90,225,140,.10);

    color:#6ce49b;
}

.a148-reception-status.no-show {
    background:
        rgba(255,112,112,.10);

    color:#ff9a9a;
}


/* ---------------------------------------------------------
   Journal details
   --------------------------------------------------------- */

.a148-client {
    margin-top:10px;

    color:#a3a7ae;

    font-size:10px;
}

.a148-time {
    margin-top:9px;

    padding:
        8px 10px;

    border-radius:10px;

    background:
        rgba(255,255,255,.035);

    color:#bbbfc5;

    font-size:9px;
}

.a148-services {
    margin-top:9px;

    color:#82868e;

    font-size:9px;
    line-height:1.42;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.a148-stats {
    display:flex;
    align-items:center;
    gap:6px;

    margin-top:11px;
}

.a148-stat {
    padding:
        6px 8px;

    border-radius:9px;

    background:
        rgba(255,255,255,.04);

    color:#979ba3;

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

.a148-appointment-status {
    margin-left:auto;

    color:#6f747c;

    font-size:8px;
}

.a148-card-actions {
    display:grid;
    grid-template-columns:
        1fr auto;

    gap:7px;

    margin-top:11px;
}

.a148-open {
    min-height:40px;

    border:0;
    border-radius:12px;

    background:
        rgba(217,255,67,.10);

    color:var(--accent);

    font-size:9px;
    font-weight:900;
}

.a148-show-card {
    min-width:94px;

    padding:0 11px;

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

    border-radius:12px;

    background:
        rgba(255,255,255,.035);

    color:#afb3ba;

    font-size:9px;
    font-weight:850;
}


/* ---------------------------------------------------------
   Empty
   --------------------------------------------------------- */

.a148-empty {
    padding:
        35px 20px;

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

    border-radius:20px;

    background:
        rgba(255,255,255,.025);

    text-align:center;
}

.a148-empty-icon {
    font-size:35px;
}

.a148-empty-title {
    margin-top:10px;

    font-size:16px;
    font-weight:900;
}

.a148-empty-text {
    margin-top:6px;

    color:#7f838a;

    font-size:10px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   Loading
   --------------------------------------------------------- */

.a148-loading {
    padding:30px;

    text-align:center;

    color:#858991;

    font-size:10px;
}