/* ============================================================
   enesay.ru — shared/css/components.css
   Компоненты. iOS-style dark.
   ============================================================ */

/* ============================================================
   СЕТКА
   ============================================================ */
.grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   КАРТОЧКА (glass, iOS grouped style)
   ============================================================ */
.card {
    background: var(--glass-bg);
    backdrop-filter: saturate(var(--glass-saturate)) blur(20px);
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-4);
    padding: var(--s-5);
    box-shadow: var(--sh-1);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform var(--t-base) var(--ease);
}
.card:hover {
    border-color: var(--border-hi);
    box-shadow: var(--sh-2);
}
.card.solid {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ============================================================
   STAT (строка «метка — значение»)
   ============================================================ */
.stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    font-size: var(--fs-md);
    border-bottom: 1px dashed var(--border-2);
}
.stat:last-child { border-bottom: none; padding-bottom: 0; }
.stat:first-child { padding-top: 0; }
.stat .label { color: var(--fg-dim); letter-spacing: var(--ls-base); }
.stat .value {
    color: var(--fg);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-base);
}
.stat .value.green  { color: var(--green); }
.stat .value.yellow { color: var(--yellow); }
.stat .value.orange { color: var(--orange); }
.stat .value.purple { color: var(--purple); }
.stat .value.blue   { color: var(--blue); }
.stat .value.red    { color: var(--red); }

/* ============================================================
   КНОПКА
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 10px var(--s-4);
    min-height: 38px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
    color: var(--fg);
    border-radius: var(--r-2);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-med);
    letter-spacing: var(--ls-base);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.btn:hover:not([disabled]) {
    background: rgba(255,255,255,.10);
    border-color: var(--border-hi);
}
.btn:active:not([disabled]) { transform: scale(.97); }
.btn:focus-visible {
    outline: none;
    box-shadow: var(--sh-glow-accent);
    border-color: var(--accent);
}
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* primary */
.btn.primary {
    color: #fff;
    background: var(--accent);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(10,132,255,.35);
}
.btn.primary:hover:not([disabled]) {
    background: var(--accent-hi);
    box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 8px 22px rgba(10,132,255,.45);
}

/* варианты */
.btn.start {
    color: var(--green);
    border-color: rgba(48,209,88,.35);
    background: var(--green-soft);
}
.btn.start:hover:not([disabled]) {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 4px 16px rgba(48,209,88,.35);
}
.btn.stop {
    color: var(--yellow);
    border-color: rgba(255,214,10,.35);
    background: var(--yellow-soft);
}
.btn.stop:hover:not([disabled]) {
    color: #1a1a1a;
    background: var(--yellow);
    border-color: var(--yellow);
    box-shadow: 0 4px 16px rgba(255,214,10,.30);
}
.btn.danger {
    color: var(--danger);
    border-color: rgba(255,69,58,.35);
    background: var(--danger-soft);
}
.btn.danger:hover:not([disabled]) {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 4px 16px rgba(255,69,58,.35);
}
.btn.ghost {
    color: var(--fg-dim);
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.btn.ghost:hover:not([disabled]) {
    color: var(--fg);
    background: rgba(255,255,255,.06);
    border-color: var(--glass-border);
}

/* ============================================================
   ИКОНОЧНАЯ КНОПКА
   ============================================================ */
.icon-bar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-2);
    flex: 0 0 auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--r-1);
    color: var(--fg-dim);
    cursor: pointer;
    font: inherit;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.icon-btn:hover:not([disabled]) {
    background: rgba(255,255,255,.10);
    color: var(--fg);
}
.icon-btn:active:not([disabled]) { transform: scale(.92); }
.icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--sh-glow-accent);
}
.icon-btn[disabled] { opacity: .3; cursor: not-allowed; }
.icon-btn svg { width: 16px; height: 16px; display: block; fill: currentColor; }

.icon-btn.start:hover:not([disabled])   { color: var(--green);  background: var(--green-soft); }
.icon-btn.stop:hover:not([disabled])    { color: var(--yellow); background: var(--yellow-soft); }
.icon-btn.restart:hover:not([disabled]) { color: var(--blue);   background: var(--blue-soft); }
.icon-btn.danger:hover:not([disabled])  { color: var(--danger); background: var(--danger-soft); }

.icon-bar .sep {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.10);
    margin: 0 4px;
}

/* ============================================================
   БЕЙДЖ (pill)
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-loose);
    border: 1px solid;
    white-space: nowrap;
    line-height: 1.2;
}
.b-green  { color: var(--green);  border-color: rgba(48,209,88,.4);  background: var(--green-soft); }
.b-yellow { color: var(--yellow); border-color: rgba(255,214,10,.4); background: var(--yellow-soft); }
.b-orange { color: var(--orange); border-color: rgba(255,159,10,.4); background: var(--orange-soft); }
.b-red    { color: var(--red);    border-color: rgba(255,69,58,.4);  background: var(--red-soft); }
.b-blue   { color: var(--blue);   border-color: rgba(10,132,255,.4); background: var(--blue-soft); }
.b-purple { color: var(--purple); border-color: rgba(191,90,242,.4); background: var(--purple-soft); }
.b-pink   { color: var(--pink);   border-color: rgba(255,55,95,.4);  background: var(--pink-soft); }
.b-teal   { color: var(--teal);   border-color: rgba(100,210,255,.4);background: var(--teal-soft); }

/* ============================================================
   PLACEHOLDER
   ============================================================ */
.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--s-3);
    color: var(--fg-mute);
    user-select: none;
    text-align: center;
}
.placeholder-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-med);
    color: var(--fg-dim);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.placeholder-sub {
    font-size: var(--fs-base);
    color: var(--fg-faint);
}

/* ============================================================
   EMPTY / ERROR
   ============================================================ */
.empty, .error {
    text-align: center;
    padding: var(--s-12) var(--s-4);
    color: var(--fg-mute);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}
.error { color: var(--red); }

/* ============================================================
   INPUT
   ============================================================ */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 10px var(--s-3);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-2);
    color: var(--fg);
    font-family: inherit;
    font-size: var(--fs-md);
    letter-spacing: var(--ls-base);
    line-height: 1.4;
    outline: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    background: rgba(10,132,255,.08);
    box-shadow: var(--sh-glow-accent);
}

/* ============================================================
   ЛОГ (mono, читаемый)
   ============================================================ */
pre.log, .log {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--s-4);
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--fg-dim);
    letter-spacing: 0;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
pre.log::-webkit-scrollbar, .log::-webkit-scrollbar { width: 10px; }
pre.log::-webkit-scrollbar-track, .log::-webkit-scrollbar-track { background: transparent; }
pre.log::-webkit-scrollbar-thumb, .log::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 640px) {
    .card { padding: var(--s-4); border-radius: var(--r-3); }
    .btn { padding: 10px var(--s-3); min-height: 36px; }
    .grid { gap: var(--s-3); }
    pre.log, .log { padding: var(--s-3); font-size: var(--fs-xs); }
}