/**
 * iOS / iPadOS style kit — dùng chung cho các trang "công cụ" độc lập
 * (File Transfer, So sánh văn bản, và các trang tương tự sau này).
 *
 * Chỉ chứa phần khung chung: design tokens, nav bar, card/row kiểu iOS
 * Settings, switch, button, stat display, layout 2 cột. Style riêng của
 * từng trang (màu sắc nghiệp vụ, component đặc thù) viết trong <style>
 * của Blade view như bình thường, đặt SAU khi load file này.
 *
 * Cách dùng: <link rel="stylesheet" href="{{ url('/css/shared/ios-kit.css') }}">
 */

:root {
    --blue:   #007AFF; --green:  #34C759; --red:    #FF3B30;
    --orange: #FF9500; --purple: #AF52DE; --teal:   #5AC8FA;

    --label:  #000;    --label2: rgba(60,60,67,.6);  --label3: rgba(60,60,67,.3);
    --fill:   rgba(120,120,128,.2);
    --bg:     #fff;    --bg2:    #F2F2F7; --bg3:    #fff;
    --sep:    rgba(60,60,67,.29);

    --nav-h:  44px;
    --safe-t: env(safe-area-inset-top,0px);
    --safe-b: env(safe-area-inset-bottom,0px);
    --safe-l: env(safe-area-inset-left,0px);
    --safe-r: env(safe-area-inset-right,0px);

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 17px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --blue:   #0A84FF; --green:  #30D158; --red:    #FF453A;
        --orange: #FF9F0A; --purple: #BF5AF2; --teal:   #64D2FF;

        --label:  #fff;    --label2: rgba(235,235,245,.6); --label3: rgba(235,235,245,.3);
        --fill:   rgba(120,120,128,.36);
        --bg:     #1C1C1E; --bg2:    #000;    --bg3:    #1C1C1E;
        --sep:    rgba(84,84,88,.65);
    }
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body { min-height: 100%; background: var(--bg2); color: var(--label); overflow-x: hidden; }
a { color: var(--blue); text-decoration: none; }

.wrap { min-height: 100vh; background: var(--bg2); position: relative; }

/* Navbar — frosted glass, sticky */
.nav {
    position: sticky; top: 0; z-index: 100;
    height: calc(var(--nav-h) + var(--safe-t));
    padding-top: var(--safe-t);
    background: rgba(242,242,247,.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid var(--sep);
}
@media (prefers-color-scheme: dark) { .nav { background: rgba(28,28,30,.82); } }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; padding: 0 8px; position: relative; }
.nav-back {
    display: flex; align-items: center; gap: 2px;
    color: var(--blue); font-size: 17px;
    padding: 4px 8px; border-radius: 8px; flex-shrink: 0;
}
.nav-back:active { opacity: .5; }
.nav-back i { font-size: 20px; margin-right: -3px; }

/* Biến thể nút back hình tròn, chỉ icon (không chữ) */
.nav-back-circle {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--label);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.nav-back-circle:active { opacity: .6; }
.nav-back-circle i { font-size: 19px; }
.nav-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 17px; font-weight: 600;
    opacity: 0; transition: opacity .25s;
    pointer-events: none; white-space: nowrap;
}
.nav-title.show { opacity: 1; }

.page { padding-bottom: calc(48px + var(--safe-b)); padding-left: var(--safe-l); padding-right: var(--safe-r); }

.page-title { padding: 6px 16px 20px; }
.page-title h1 { font-size: 34px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; }

.section { margin-bottom: 24px; }
.section-label {
    font-size: 15px; font-weight: 700;
    color: var(--label2);
    padding: 0 16px 6px;
}

/* Inset card (iOS grouped list) */
.card { background: var(--bg3); border-radius: 12px; margin: 0 16px; overflow: hidden; }

.row { display: flex; align-items: center; padding: 12px 16px; min-height: 52px; position: relative; gap: 12px; }
.row + .row::before {
    content: ''; position: absolute; top: 0; left: 16px; right: 0;
    height: .5px; background: var(--sep);
}
.row-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: #fff; background: var(--blue);
}
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: 15px; font-weight: 600; color: var(--label); }
.row-sub { font-size: 13px; color: var(--label2); margin-top: 2px; line-height: 1.45; }

/* Option chips — hàng icon bấm chọn kiểu Control Center, mở rộng bằng
   cách thêm 1 <button class="option-chip"> mới, không cần sửa CSS.
   Tên tùy chọn hiện thành tooltip khi hover/focus vào icon. */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
.option-chip {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; flex-shrink: 0;
    background: none; border: none; cursor: pointer; font-family: inherit;
    transition: transform .1s;
}
.option-chip:active { transform: scale(.94); }
.option-chip-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--label2); background: var(--fill);
    transition: background .15s, color .15s;
}
.option-chip.active .option-chip-icon { background: var(--blue); color: #fff; }

/* Chip hành động (không phải toggle bật/tắt) — vd: xóa tất cả */
.option-chip.chip-danger .option-chip-icon { background: rgba(255,59,48,.15); color: var(--red); }

.option-chip-label {
    position: absolute; bottom: calc(100% + 7px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20,20,22,.92); color: #fff;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    padding: 5px 9px; border-radius: 7px;
    opacity: 0; pointer-events: none; z-index: 20;
    transition: opacity .15s, transform .15s;
}
@media (prefers-color-scheme: dark) {
    .option-chip-label { background: rgba(245,245,247,.92); color: #000; }
}
.option-chip:hover .option-chip-label,
.option-chip:focus-visible .option-chip-label { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Stat display (hàng số liệu tổng quan) */
.stats-row { display: flex; }
.stat-item { flex: 1; text-align: center; padding: 14px 6px; position: relative; }
.stat-item + .stat-item::before {
    content: ''; position: absolute; top: 14px; bottom: 14px; left: 0;
    width: .5px; background: var(--sep);
}
.stat-value { font-size: 20px; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 11px; color: var(--label2); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }

/* Layout 2 cột cạnh nhau (result panels, input panels...) — căn thẳng với
   .card/.row/.chip-row (đều lệch 16px so với mép trang) nên các phần tử
   con (caption, card) không được có thêm padding/margin trái/phải riêng. */
.panels-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 16px; }
@media (max-width: 640px) { .panels-row { grid-template-columns: 1fr; } }
.panels-row .card { margin: 0; }
.panel-caption, .input-caption { font-size: 12px; font-weight: 600; color: var(--label2); padding: 0 0 6px; }

/* Hàng caption có kèm hành động phụ bên phải (vd: nút Xóa cạnh ô nhập) */
.caption-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 6px; }
.caption-row .panel-caption, .caption-row .input-caption { padding: 0; }

/* Nút dạng link — dùng cho hành động phụ, không cần nổi bật như .btn */
.link-btn {
    background: none; border: none; padding: 0; margin: 0;
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--blue); cursor: pointer;
}
.link-btn:active { opacity: .5; }

/* iOS-style switch */
.ios-switch { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.ios-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ios-switch-track {
    position: absolute; inset: 0; background: var(--fill); border-radius: 31px;
    transition: background .2s; cursor: pointer;
}
.ios-switch-track::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 27px; height: 27px; background: #fff; border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
    transition: transform .2s;
}
.ios-switch input:checked + .ios-switch-track { background: var(--green); }
.ios-switch input:checked + .ios-switch-track::before { transform: translateX(20px); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; cursor: pointer; font-family: inherit; font-weight: 600;
    border-radius: 980px; transition: opacity .12s, transform .1s;
}
.btn:active { opacity: .65; transform: scale(.97); }
.btn-fill  { background: var(--blue); color: #fff; font-size: 17px; padding: 13px 22px; }
.btn-fill:disabled { opacity: .4; }
.btn-ghost { background: var(--fill); color: var(--label); font-size: 17px; padding: 13px 22px; }
/* Biến thể "destructive" — nền tint đỏ nhạt + chữ đỏ, đúng quy ước iOS
   cho hành động nguy hiểm (khác với chỉ đổi màu chữ trên nền xám). */
.btn-ghost-danger { background: rgba(255,59,48,.12); color: var(--red); font-size: 17px; padding: 13px 22px; }
.btn-block { width: 100%; }
.btn-lg { font-size: 18px; padding: 17px 26px; }
.btn-row { display: flex; gap: 12px; margin: 14px 16px 0; justify-content: center; }

.loading-hint { text-align: center; font-size: 13px; color: var(--label2); padding: 8px 0 0; }