/*
 * assets/css/theme-3d.css
 * ─────────────────────────────────────────────────────────────
 * Design system "3D glossy" dùng CHUNG cho admin/ (qua admin.css)
 * và trang công khai (qua assets/css/map.css). Hai file gốc đó đã
 * dùng chung tên biến --accent/--radius-*/--shadow nên chỉ cần định
 * nghĩa lại các biến này + thêm vài biến mới là cascade tự động lan
 * ra hầu hết nơi khác chưa được sửa tay trực tiếp bên dưới.
 *
 * Nạp SAU admin.css hoặc map.css. Màu thật (--accent/--accent2) do
 * admin/theme-settings.php ghi đè tiếp sau file này qua
 * assets/css/theme-dynamic.php (không sửa file .css tĩnh này khi đổi màu).
 *
 * Quy ước token (đối chiếu bảng thiết kế):
 *  - Bo góc:      --radius-sm (nút/input nhỏ) < --radius-md (card) < --radius-lg (modal)
 *  - Độ dày viền: --bw-1 (1px, mặc định) / --bw-1-5 (1.5px, input focus) / --bw-2-5 (2.5px, đang chọn/nổi bật)
 *  - Độ đổ bóng:  --shadow-1 (nhẹ) / --shadow-2 (vừa, mặc định card/nút) / --shadow-3 (mạnh, hover/nổi bật)
 *  - Icon:        --icon-sm 16px / --icon-md 20px / --icon-lg 24px
 * ───────────────────────────────────────────────────────────── */

:root {
    /* Primary — màu thương hiệu chính (nav active, link, nút chính, focus ring) */
    --accent:        #4f9cf9;
    --accent-h:       #6aadff;   /* alias admin.css */
    --accent-hover:   #6aadff;   /* alias map.css */
    --accent-glow:    rgba(79,156,249,.35);
    --accent-dark:    #2f6fd1;

    /* Accent — màu phụ cho gradient/glow/điểm nhấn (badge tài trợ, số nổi bật...) */
    --accent2:        #8b5cf6;
    --accent2-h:      #a78bfa;
    --accent2-glow:   rgba(139,92,246,.35);

    /* Bo góc */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    /* Độ dày viền */
    --bw-1:   1px;
    --bw-1-5: 1.5px;
    --bw-2-5: 2.5px;

    /* Đổ bóng 3 mức */
    --shadow-1: 0 2px 6px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.05) inset;
    --shadow-2: 0 8px 20px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.06) inset;
    --shadow-3: 0 16px 40px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.08) inset;

    /* Viền sáng phía trên (hiệu ứng bóng bẩy / glossy highlight) */
    --gloss-top:    rgba(255,255,255,.16);
    --gloss-top-2:  rgba(255,255,255,.06);

    /* Kích thước icon chuẩn */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;

    --ease-3d: cubic-bezier(.2,.8,.3,1.2);
}

/* ═══════════════════════════════════════════════════════════
   TIỆN ÍCH DÙNG CHUNG (áp cho cả admin lẫn public qua class .g3d-*)
   ═══════════════════════════════════════════════════════════ */
.g3d-icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.g3d-icon-md { width: var(--icon-md); height: var(--icon-md); }
.g3d-icon-lg { width: var(--icon-lg); height: var(--icon-lg); }

/* Trạng thái loading dùng chung: thêm class "is-loading" vào bất kỳ nút nào
   (.btn / .tb-btn / .btn-header...) — chữ mờ đi, 1 vòng xoay nhỏ hiện lên đè lên,
   con trỏ chờ, không click được (pointer-events:none). */
.is-loading { position: relative; color: transparent !important; pointer-events: none !important; }
.is-loading::after {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    animation: g3d-spin .7s linear infinite;
}
@keyframes g3d-spin { to { transform: rotate(360deg); } }

/* Focus ring bền — không biến mất khi rê chuột ra, chỉ mất khi thật sự blur */
.g3d-focusable:focus-visible,
.btn:focus-visible, .form-control:focus-visible, .tb-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-2);
}

/* ═══════════════════════════════════════════════════════════
   1) ADMIN (admin/css/admin.css) — các class dùng chung mọi trang
   ═══════════════════════════════════════════════════════════ */
body { background-image: radial-gradient(circle at 15% 0%, rgba(79,156,249,.05), transparent 40%); }

.sidebar-logo-icon {
    background: linear-gradient(155deg, var(--accent-h), var(--accent) 55%, var(--accent-dark));
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
    border-radius: var(--radius-sm);
}

.nav-item {
    border-radius: var(--radius-sm);
    margin: 0 8px;
    transition: all .16s var(--ease-3d);
}
.nav-item.active {
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1);
}
.nav-item:hover:not(.active) { transform: translateX(2px); }

.card, .stat-card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    border-width: var(--bw-1);
    background-image: linear-gradient(180deg, var(--gloss-top-2), transparent 18%);
    transition: box-shadow .18s var(--ease-3d), transform .18s var(--ease-3d);
}
.card:hover { box-shadow: var(--shadow-3); }

.stat-icon {
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--gloss-top);
    background-image: linear-gradient(155deg, var(--gloss-top-2), transparent);
}

.btn {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
    transition: transform .12s var(--ease-3d), box-shadow .12s var(--ease-3d), filter .12s;
    position: relative;
}
.btn-primary {
    background: linear-gradient(180deg, var(--accent-h), var(--accent) 65%, var(--accent-dark));
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-3), inset 0 1px 0 var(--gloss-top); transform: translateY(-1px); }
.btn-secondary {
    background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.03);
}
.btn:active { transform: translateY(1px) scale(.98); box-shadow: 0 1px 3px rgba(0,0,0,.4) inset; }
.btn:disabled, .btn.disabled {
    opacity: .5; box-shadow: none; filter: grayscale(.3); cursor: not-allowed; transform: none !important;
}

.form-control {
    border-radius: var(--radius-sm);
    border-width: var(--bw-1);
    box-shadow: 0 1.5px 3px rgba(0,0,0,.25) inset;
    transition: box-shadow .15s, border-color .15s;
}
.form-control:focus {
    border-width: var(--bw-1-5);
    box-shadow: 0 1.5px 3px rgba(0,0,0,.25) inset, 0 0 0 3px var(--accent-glow);
}

.toggle-sw input:checked + .toggle-track {
    background: linear-gradient(180deg, var(--accent-h), var(--accent));
    box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 2px rgba(0,0,0,.25);
}
.toggle-track {
    box-shadow: inset 0 1.5px 3px rgba(0,0,0,.35);
    transition: background .18s, box-shadow .18s;
}
.toggle-thumb {
    box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6);
}

.modal {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    background-image: linear-gradient(180deg, var(--gloss-top-2), transparent 12%);
    border-width: var(--bw-1);
}

.page-btn {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
    transition: transform .12s var(--ease-3d);
}
.page-btn:hover { transform: translateY(-1px); }
.page-btn.active {
    background: linear-gradient(180deg, var(--accent-h), var(--accent));
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
}

.alert { border-radius: var(--radius-sm); box-shadow: var(--shadow-1); }

.badge { border-radius: 999px; box-shadow: var(--shadow-1); }

/* Hàng bảng: hover/đang chọn nổi bật hơn */
table tr:hover td { background: rgba(255,255,255,.025); }
table tr.row-active td, table tr.selected td {
    background: var(--accent-glow) !important;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   2) TRANG CÔNG KHAI (assets/css/map.css)
   ═══════════════════════════════════════════════════════════ */

/* Toolbar dọc trái — dải icon giống ảnh mẫu (home/lớp bản đồ/vẽ/đo đạc...) */
#map-toolbar {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    border-width: var(--bw-1);
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%), var(--bg-glass, rgba(26,29,39,.92));
    padding: 10px 7px;
}
.tb-btn {
    border-radius: var(--radius-sm);
    transition: transform .14s var(--ease-3d), box-shadow .14s var(--ease-3d), background .14s;
}
.tb-btn:hover {
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}
.tb-btn.tb-btn-active {
    background: linear-gradient(180deg, var(--accent-h), var(--accent));
    color: #fff;
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
    border-color: transparent;
}
.tb-btn:active { transform: translateY(1px) scale(.94); }
#tb-toolbar-toggle {
    background: linear-gradient(180deg, var(--accent2-h), var(--accent2));
    color: #fff;
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
    border-radius: var(--radius-sm);
}

.btn-primary {
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--accent-hover), var(--accent) 65%, var(--accent-dark));
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
    transition: transform .12s var(--ease-3d), filter .12s, box-shadow .12s;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn-primary:active { transform: translateY(1px) scale(.98); }

.btn-header {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
    transition: transform .12s var(--ease-3d), box-shadow .12s;
}
.btn-header:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-header-primary {
    background: linear-gradient(180deg, var(--accent-hover), var(--accent));
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
}

.user-avatar-btn { box-shadow: var(--shadow-1), inset 0 1px 0 var(--gloss-top); }

.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-3) !important;
}
.leaflet-popup-tip { box-shadow: var(--shadow-1) !important; }

.toggle-track { box-shadow: inset 0 1.5px 3px rgba(0,0,0,.35); transition: background .18s, box-shadow .18s; }
.toggle-switch input:checked + .toggle-track {
    background: linear-gradient(180deg, var(--accent-hover), var(--accent));
    box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 2px rgba(0,0,0,.25);
}
.toggle-thumb { box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6); }

#search-box, .search-box, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"] {
    transition: box-shadow .15s, border-color .15s;
}
.search-ext-suggest-btn:hover, .measure-btn:hover, .draw-btn:hover, .b-action-btn:hover, .dwm-btn-secondary:hover {
    box-shadow: var(--shadow-1);
}
.measure-btn.active, .draw-btn.active {
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
}
.b-action-btn-accent, .btn-cn-primary, .dwm-btn-primary {
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--gloss-top);
    border-radius: var(--radius-sm);
}

#legend {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

/* Badge tài trợ POI — dùng màu Accent (phụ) để phân biệt rõ với Primary */
.poi-nearby-sponsor-badge {
    background: linear-gradient(180deg, var(--accent2-h), var(--accent2)) !important;
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--gloss-top);
}

/* Marker vị trí chia sẻ / kết quả tìm kiếm — glow theo Accent để nổi bật trên nền Primary */
.shared-loc-pulse { box-shadow: 0 0 0 4px var(--accent2-glow); }

@media (prefers-reduced-motion: reduce) {
    .btn, .btn-primary, .tb-btn, .card, .page-btn { transition: none !important; }
}