/* Гараж 211 — Page Standard Components
   Стандартна дизайн-система для сторінок-списків.
   Завантажується глобально після unified-theme.css.
   Класи: ph-* (header), ps-* (stats), pc-* (card), pf-* (filter), pt-* (toolbar)
*/

/* ================================================
   PAGE HEADER  (.ph-*)
   ================================================ */
.ph-wrap {
    background:
        radial-gradient(circle at 80% 0%, rgba(148,163,255,.25), transparent 42%),
        linear-gradient(135deg, #162452, #1f3f77 55%, #2a4f8f);
    color: #fff;
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px solid rgba(198,208,255,.26);
    box-shadow: 0 14px 34px rgba(8,12,36,.35);
    margin-bottom: 8px;
}

.ph-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.ph-title {
    margin: 0;
    font-size: 26px;
    letter-spacing: .2px;
    color: #fff;
}

.ph-subtitle {
    opacity: .9;
    font-size: 13px;
    margin-top: 6px;
    color: rgba(232,239,255,.9);
}

.ph-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

/* ================================================
   STATS ROW  (.ps-*)
   ================================================ */
.ps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.ps-stat {
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.ps-num {
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
}

.ps-label {
    font-size: 12px;
    opacity: .85;
    margin-top: 4px;
}

/* ================================================
   CARD SURFACE  (.pc-*)
   ================================================ */
.pc-card {
    background: linear-gradient(180deg, rgba(39,50,105,.56), rgba(30,41,90,.5));
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 26px rgba(8,12,36,.26);
}

.pc-flash {
    padding: 13px 18px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-flash.is-ok {
    background: rgba(74,222,128,.1);
    border-left: 4px solid #4ade80;
    color: #86efac;
}

.pc-flash.is-error {
    background: rgba(239,68,68,.12);
    border-left: 4px solid #ef4444;
    color: #fca5a5;
}

.pc-flash.is-info {
    background: rgba(139,92,246,.12);
    border-left: 4px solid #8b5cf6;
    color: #c4b5fd;
}

/* ================================================
   FILTER SECTION  (.pf-*)
   ================================================ */
.pf-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.pf-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.pf-search-icon {
    position: absolute;
    left: 12px;
    color: rgba(165,180,252,.5);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.pf-search-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(9,14,42,.45);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.pf-search-input:focus {
    border-color: rgba(167,139,250,.82);
    box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

.pf-search-input::placeholder {
    color: rgba(148,163,184,.55);
}

.pf-search-clear {
    position: absolute;
    right: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(165,180,252,.7);
    font-size: 12px;
    transition: all .15s;
    z-index: 2;
}

.pf-search-clear.is-visible,
[x-show].pf-search-clear { display: inline-flex; }

.pf-search-clear:hover {
    background: rgba(167,139,250,.22);
    color: #e2e8f0;
}

/* Select всередині pf-grid не розтягується на всю ширину */
.pf-grid .pf-select,
.pf-grid select.pf-select {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(9,14,42,.45);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    width: auto;
    min-width: 150px;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color .2s;
    box-sizing: border-box;
    outline: none;
    appearance: auto;
}

.pf-grid .pf-select:focus,
.pf-grid select.pf-select:focus {
    border-color: rgba(167,139,250,.82);
    box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

/* Гарантовано: .projects-select всередині pf-grid — auto width */
.pf-grid .projects-select {
    width: auto;
    flex-shrink: 0;
    min-width: 150px;
}

.pf-chip {
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,.06);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-sub);
    transition: all .2s;
    white-space: nowrap;
}

.pf-chip.active {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}

.pf-chip:hover:not(.active) {
    border-color: #667eea;
    color: #667eea;
}

/* ================================================
   TOOLBAR  (.pt-*)
   ================================================ */
.pt-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 12px;
}

/* Варіант без нижньої межі (коли toolbar всередині .pc-card після pf-grid) */
.pt-bar.is-top {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 10px;
}

.pt-meta {
    color: var(--color-text-sub);
    font-size: 13px;
    font-weight: 600;
}

.pt-view-switch {
    display: flex;
    gap: 8px;
}

.pt-view-btn {
    padding: 9px 13px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    color: var(--color-text-sub);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all .2s;
}

.pt-view-btn:hover {
    border-color: rgba(167,139,250,.45);
    color: #e8edff;
}

.pt-view-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: rgba(198,208,255,.35);
}

/* ================================================
   STANDARD TABLE  (.std-table)
   ================================================ */
.std-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(23,33,70,.7);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    table-layout: auto;
}

.std-table thead th {
    background: linear-gradient(180deg, rgba(103,74,197,.28), rgba(83,60,163,.18));
    color: #c9d4f9;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.std-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    border-bottom: 1px solid rgba(177,189,255,.08);
    color: var(--color-text);
    vertical-align: middle;
    background: transparent;
}

.std-table tbody tr:last-child td {
    border-bottom: none;
}

.std-table tbody tr:hover td {
    background: rgba(167,139,250,.07);
}

.std-table tbody tr.is-unavailable td {
    background: rgba(239,68,68,.07);
}

/* Details row (expandable) */
.std-table tbody tr.std-details-row td {
    background: rgba(139,92,246,.08);
    border-top: 2px dashed rgba(139,92,246,.3);
    padding: 0;
    vertical-align: top;
}
.std-details-inner { padding: 20px 24px; }
.std-details-title { font-weight: 700; color: #c4b5fd; margin-bottom: 16px; font-size: 15px; }
.std-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.std-details-label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 4px; }
.std-details-val { background: rgba(139,92,246,.12); padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--color-text); }
.std-details-val.std-highlight { font-weight: 700; color: #86efac; }
.std-details-block { margin-top: 14px; }
.std-link { color: #93c5fd; text-decoration: none; }
.std-link:hover { text-decoration: underline; }
.std-badge { background: rgba(99,102,241,.25); color: #a5b4fc; font-family: monospace; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.std-muted { color: #94a3b8; font-weight: 400; font-size: 13px; }

/* ================================================
   STANDARD CARD GRID  (.std-grid, .std-card)
   ================================================ */
.std-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 4px 0;
}

.std-card {
    background: linear-gradient(180deg, rgba(39,50,105,.7), rgba(28,39,88,.6));
    border: 1px solid var(--color-border);
    border-left: 4px solid rgba(167,139,250,.45);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s, transform .15s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.std-card:hover {
    border-left-color: rgba(167,139,250,.75);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102,126,234,.15);
}

.std-card-body {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.std-card-actions {
    padding: 10px 16px 14px;
    display: flex;
    gap: 6px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-wrap: wrap;
    align-items: center;
}

/* ================================================
   FLASH TOAST (для position:fixed контейнера)
   ================================================ */
.flash-toast {
    animation: flashSlideIn .4s cubic-bezier(.68,-.55,.265,1.55);
    box-shadow: 0 8px 24px rgba(8,12,36,.45);
    min-width: 280px;
    max-width: 420px;
}

.flash-toast:hover {
    transform: translateX(-3px);
}

@keyframes flashSlideIn {
    from { transform: translateX(440px); opacity: 0; }
    60%  { transform: translateX(-10px); opacity: 1; }
    to   { transform: translateX(0); }
}

/* ================================================
   TABLE RESPONSIVE WRAPPER
   ================================================ */
.std-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ================================================
   AVATAR VISUAL STANDARD
   Keep existing sizes, normalize look to admin preview:
   - no decorative borders/shadows
   - solid brand background for initials
   - centered initials text
   ================================================ */
.user-avatar,
.ac-user-avatar,
.uc-av,
.uc-topbar-av,
.uc-msg-av,
.avatar-circle,
.af-avatar-circle,
.ca-avatar-circle,
.ca-avatar-large,
.ce-hero-avatar,
.od-avatar,
.od-mech-av,
.ow-worker-avatar,
.wk-avatar-fallback,
.od-avatar-fallback,
.av-placeholder {
    border: none !important;
    box-shadow: none !important;
}

body.av-frame-on .user-avatar,
body.av-frame-on .ac-user-avatar,
body.av-frame-on .uc-av,
body.av-frame-on .uc-topbar-av,
body.av-frame-on .uc-msg-av,
body.av-frame-on .avatar-circle,
body.av-frame-on .af-avatar-circle,
body.av-frame-on .ca-avatar-circle,
body.av-frame-on .ca-avatar-large,
body.av-frame-on .ce-hero-avatar,
body.av-frame-on .od-avatar,
body.av-frame-on .od-mech-av,
body.av-frame-on .ow-worker-avatar,
body.av-frame-on .wk-avatar-fallback,
body.av-frame-on .od-avatar-fallback,
body.av-frame-on .av-placeholder {
    border: var(--avatar-frame-width, 2px) solid var(--avatar-frame-color, #8b5cf6) !important;
}

.ac-user-avatar,
.uc-av,
.uc-topbar-av,
.uc-msg-av,
.avatar-circle,
.af-avatar-circle,
.ca-avatar-circle,
.ca-avatar-large,
.ce-hero-avatar,
.ow-worker-avatar,
.wk-avatar-fallback,
.od-avatar-fallback,
.av-placeholder {
    background: var(--avatar-bg-color, #6366f1) !important;
    color: #ffffff !important;
}

/* Unified gradient behavior for avatar placeholders/containers */
.uc-av[class*="uc-av-"],
.uc-topbar-av[class*="uc-av-"],
.uc-msg-av[class*="uc-av-"],
.ac-user-avatar,
.avatar-circle,
.af-avatar-circle,
.ca-avatar-circle,
.ca-avatar-large,
.ce-hero-avatar,
.ow-worker-avatar,
.wk-avatar-fallback,
.od-avatar-fallback,
.av-placeholder {
    background:
        linear-gradient(135deg, var(--avatar-gradient-from, #6366f1), var(--avatar-gradient-to, #8b5cf6)) !important;
}

body.av-grad-none .uc-av[class*="uc-av-"],
body.av-grad-none .uc-topbar-av[class*="uc-av-"],
body.av-grad-none .uc-msg-av[class*="uc-av-"],
body.av-grad-none .ac-user-avatar,
body.av-grad-none .avatar-circle,
body.av-grad-none .af-avatar-circle,
body.av-grad-none .ca-avatar-circle,
body.av-grad-none .ca-avatar-large,
body.av-grad-none .ce-hero-avatar,
body.av-grad-none .ow-worker-avatar,
body.av-grad-none .wk-avatar-fallback,
body.av-grad-none .od-avatar-fallback,
body.av-grad-none .av-placeholder {
    background: var(--avatar-bg-color, #6366f1) !important;
}

body.av-grad-radial .uc-av[class*="uc-av-"],
body.av-grad-radial .uc-topbar-av[class*="uc-av-"],
body.av-grad-radial .uc-msg-av[class*="uc-av-"],
body.av-grad-radial .ac-user-avatar,
body.av-grad-radial .avatar-circle,
body.av-grad-radial .af-avatar-circle,
body.av-grad-radial .ca-avatar-circle,
body.av-grad-radial .ca-avatar-large,
body.av-grad-radial .ce-hero-avatar,
body.av-grad-radial .ow-worker-avatar,
body.av-grad-radial .wk-avatar-fallback,
body.av-grad-radial .od-avatar-fallback,
body.av-grad-radial .av-placeholder {
    background: radial-gradient(circle at 30% 25%, var(--avatar-gradient-from, #6366f1), var(--avatar-gradient-to, #8b5cf6)) !important;
}

.av-placeholder,
.uc-av > span,
.uc-topbar-av > span,
.uc-msg-av > span,
.wk-avatar-fallback,
.od-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 700;
}

/* Configurable avatar size from admin settings (desktop only). */
@media (min-width: 769px) {
    .ac-user-avatar,
    .uc-av,
    .uc-topbar-av,
    .uc-msg-av,
    .avatar-circle,
    .ow-worker-avatar,
    .wk-avatar-fallback,
    .od-avatar,
    .od-mech-av,
    .od-avatar-fallback,
    .av-placeholder {
        width: var(--avatar-size-global, 56px) !important;
        height: var(--avatar-size-global, 56px) !important;
    }

    .av-placeholder,
    .uc-av > span,
    .uc-topbar-av > span,
    .uc-msg-av > span,
    .wk-avatar-fallback,
    .od-avatar-fallback {
        font-size: calc(var(--avatar-size-global, 56px) * 0.42) !important;
    }

    .topbar .user-avatar {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .ph-wrap    { padding: 16px; }
    .ph-row     { gap: 10px; }
    .ph-title   { font-size: 20px; }
    .ph-actions { width: 100%; justify-content: flex-start; }
    .ps-grid    { grid-template-columns: repeat(2, 1fr); }
    .pf-grid    { flex-direction: column; align-items: stretch; }
    .pf-grid .pf-select,
    .pf-grid .projects-select { width: 100%; min-width: unset; }
    .pt-bar     { flex-direction: column; align-items: flex-start; }
    .std-grid   { grid-template-columns: 1fr; }

    /* Таблиці — горизонтальний скрол */
    .pc-card .std-table-wrap,
    .pc-card table { display: block; overflow-x: auto; white-space: nowrap; }
}