/*
Theme Name: makosh
*/

:root{
    --primary:#ff5b24;
    --primary-light:#fff4ef;

    --success:#22a447;
    --success-bg:#e9f9ee;

    --warning:#f59e0b;
    --warning-bg:#fffbeb;

    --purple:#7c3aed;
    --purple-bg:#f3ecff;

    --text:#0f172a;
    --text-secondary:#64748b;

    --border:#eef1f5;

    --bg:#f7f8fa;
    --white:#ffffff;

    --shadow:
        0 8px 30px rgba(15,23,42,.04),
        0 2px 8px rgba(15,23,42,.03);
}

.wpcf7-not-valid{
    border:1px solid #ef4444 !important;
}

.wpcf7-not-valid-tip,
.wpcf7-validation-errors{
    display:none !important;
}

.errortext{
    text-align:center;
    background:#ef4444;
    color:#fff;
    width:100%;
    padding:16px;
    display:none;
    border-radius:12px;
}

.errortext.active{
    display:block;
}

.errortext a{
    color:#fde047;
}

.logic-menu ul li a.active,
.logic-menu ul li.active a{
    font-weight:700;
}

ol{
    list-style:auto;
}

ol br{
    display:none;
}

.single-change ol{
    padding-left:30px;
}

.hidden{
    display:none;
}

.table-item{
    flex:1 1 0;
}

body{
    background:var(--bg);
    color:var(--text);
}

/* ============================================
   TABLE WRAPPER
   ============================================ */

.orders-table-wrapper{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.orders-table-wrapper::after{
    content:'';
    position:sticky;
    right:0;
    top:0;
    width:60px;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95)
    );
    pointer-events:none;
    float:right;
    margin-left:-60px;
}

/* ============================================
   TABLE
   ============================================ */

.orders-table{
    min-width:1400px;
    width:100%;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}

/* ============================================
   HEADER
   ============================================ */

.orders-table__header{
    display:grid;

    grid-template-columns:
        70px
        110px
        110px
        110px
        130px
        130px
        110px
        140px
        minmax(220px,1fr)
        140px;

    gap:12px;

    padding:18px 20px;

    min-height:90px;

    background:#fafbfd;

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

    align-items:center;

    text-align:center;

    font-size:11px;

    font-weight:600;

    color:#94a3b8;

    letter-spacing:.3px;
}

.orders-table__header > div{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    hyphens:auto;
    line-height:1.35;
    padding:0 4px;
}

/* ============================================
   BODY
   ============================================ */

.orders-table__body{
    background:#fff;
}

/* ============================================
   ROW
   ============================================ */

.orders-table__row{
    display:grid;

    grid-template-columns:
        70px
        110px
        110px
        110px
        130px
        130px
        110px
        140px
        minmax(220px,1fr)
        140px;

    gap:12px;

    padding:18px 20px;

    min-height:72px;

    border-bottom:1px solid #f3f4f6;

    transition:all .2s ease;

    text-decoration:none;

    color:inherit;
}

.orders-table__row:last-child{
    border-bottom:none;
}

.orders-table__row:hover{
    background:#fafafa;
}

.orders-table__row.crm-change{
    background:#fffbeb;
    border-left:3px solid var(--warning);
}

.orders-table__row.crm-change:hover{
    background:#fff7db;
}

/* ============================================
   COLUMNS
   ============================================ */

.orders-table__row > div{
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
}

/* ============================================
   VALUES
   ============================================ */

.value{
    color:#334155;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:13px;
    line-height:1.5;
}

/* ============================================
   ID
   ============================================ */

.col-id .value{
    font-weight:700;
    color:var(--primary);
    font-size:14px;
}

/* ============================================
   STATUS
   ============================================ */

.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    line-height:1;
}

.status-work{
    background:var(--success-bg);
    color:var(--success);
}

.status-done{
    background:#fff2eb;
    color:var(--primary);
}

.status-revision{
    background:var(--purple-bg);
    color:var(--purple);
}

.status-cancel{
    background:#fef2f2;
    color:#dc2626;
}

/* ============================================
   DATE
   ============================================ */

.edit-date{
    font-size:13px;
    font-weight:600;
    color:var(--text);
    margin-bottom:4px;
}

.edit-status,
.edit-comment{
    font-size:11px;
    color:#94a3b8;
    line-height:1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.crm-warning{
    color:#d97706;
    font-size:11px;
    font-weight:600;
}

/* ============================================
   MOBILE
   ============================================ */

.mobile-label{
    display:none;
}

@media (max-width:768px){

    .orders-table{
        min-width:100%;
        border-radius:18px;
    }

    .orders-table__header{
        display:none;
    }

    .orders-table__row{
        display:block;
        padding:18px;
        border-left:4px solid var(--primary);
    }

    .orders-table__row.crm-change{
        border-left-color:var(--warning);
    }

    .orders-table__row > div{
        display:block;
        margin-bottom:14px;
        padding-bottom:14px;
        border-bottom:1px solid #f3f4f6;
    }

    .orders-table__row > div:last-child{
        margin-bottom:0;
        padding-bottom:0;
        border-bottom:none;
    }

    .mobile-label{
        display:block;
        margin-bottom:4px;
        font-size:11px;
        font-weight:600;
        text-transform:uppercase;
        color:#94a3b8;
    }

    .col-id .value{
        font-size:18px;
    }

    .edit-status,
    .edit-comment{
        white-space:normal;
    }
}