/* ============================================================
   APPLE THEME — "Apple" style reference (white gallery, flat,
   hairline outlines, pill controls, Apple blue accents).
   Scoped entirely under html[data-theme="apple"] so other
   themes are unaffected. Loaded AFTER style.css.
   Also defines the "SF Pro (Apple)" font stack ([data-font="sf-pro"]).
   ============================================================ */

/* ------------------------------------------------------------
   1) TOKENS -> app variables
   ------------------------------------------------------------ */
html[data-theme="apple"] {
    --primary: #0071e3;          /* Pricing Blue — filled controls */
    --primary-dark: #0066cc;     /* Apple Blue */
    --primary-light: #4a9ef5;
    --primary-50: #f5f5f7;       /* Studio Mist */
    --primary-100: #eaf3fd;
    --primary-200: #cfe7fb;
    --primary-300: #a9d2f7;
    --primary-600: #0071e3;
    --primary-700: #0066cc;
    --primary-800: #1d1d1f;      /* headings -> Ink (Apple) */
    --primary-900: #1d1d1f;

    --secondary: #86868b;        /* Steel */

    --bg-body: #f5f5f7;          /* Studio Mist band */
    --bg-card: #ffffff;          /* Gallery White */
    --bg-nav: #fafafc;           /* Paper Frost */

    --text-primary: #1d1d1f;     /* Ink */
    --text-secondary: #707070;   /* Slate */
    --text-muted: #86868b;       /* Steel */

    --border-color: #d6d6d6;     /* Hairline Silver */
    --border-radius: 28px;       /* Apple cards */

    /* Flat, shadowless elevation — 1px outlines only */
    --shadow-xs: 0 0 0 1px #e6e6e8;
    --shadow-sm: 0 0 0 1px #e6e6e8;
    --shadow-md: 0 0 0 1px #e6e6e8;
    --shadow-lg: 0 0 0 1px #e6e6e8;
    --shadow-card: 0 0 0 1px #e6e6e8;
    --shadow-hover: 0 0 0 1px #d6d6d6;

    /* Bootstrap accent vars (pick-box, form-check, pagination, ...) */
    --bs-primary: #0071e3;
    --bs-primary-rgb: 0, 113, 227;

    /* Apple theme overrides the font selector -> SF Pro stack */
    --font-family: 'SF Pro Display', 'SF Pro Text', -apple-system,
        BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* Explicit font choice: "SF Pro (Apple)" */
[data-font="sf-pro"] {
    --font-family: 'SF Pro Display', 'SF Pro Text', -apple-system,
        BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------
   2) Typography — headings in Ink (Apple is monochrome)
   ------------------------------------------------------------ */
html[data-theme="apple"] h1, html[data-theme="apple"] h2,
html[data-theme="apple"] h3, html[data-theme="apple"] h4,
html[data-theme="apple"] h5, html[data-theme="apple"] h6,
html[data-theme="apple"] .card-title {
    color: #1d1d1f !important;
}
html[data-theme="apple"] .navbar h1, html[data-theme="apple"] .navbar h2,
html[data-theme="apple"] .navbar h3, html[data-theme="apple"] .navbar h4,
html[data-theme="apple"] .navbar h5, html[data-theme="apple"] .navbar h6,
html[data-theme="apple"] .profile-header h1, html[data-theme="apple"] .profile-header h2,
html[data-theme="apple"] .profile-header h3, html[data-theme="apple"] .profile-header h4,
html[data-theme="apple"] .profile-header h5, html[data-theme="apple"] .profile-header h6,
html[data-theme="apple"] .login-page h1, html[data-theme="apple"] .login-page h2,
html[data-theme="apple"] .login-page h3, html[data-theme="apple"] .login-page h4,
html[data-theme="apple"] .login-page h5, html[data-theme="apple"] .login-page h6 {
    color: #1d1d1f !important;
}

/* ------------------------------------------------------------
   3) Navbar — white local bar, Ink labels, hairline edge
   ------------------------------------------------------------ */
html[data-theme="apple"] .navbar {
    background: #fafafc;
    border-bottom: 1px solid #e6e6e8;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
html[data-theme="apple"] .navbar .nav-link,
html[data-theme="apple"] .navbar .dropdown-toggle,
html[data-theme="apple"] .navbar .navbar-brand,
html[data-theme="apple"] .navbar .navbar-brand span {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}
html[data-theme="apple"] .navbar-brand i {
    color: #1d1d1f;
    filter: none;
}
html[data-theme="apple"] .navbar .nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f !important;
}
html[data-theme="apple"] .navbar .nav-link.active,
html[data-theme="apple"] .navbar .nav-item.active .nav-link {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f !important;
}
html[data-theme="apple"] .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="apple"] .navbar-toggler-icon {
    filter: invert(1) grayscale(1);
}

/* ------------------------------------------------------------
   4) Dropdown menus — light (header uses dropdown-menu-dark)
   ------------------------------------------------------------ */
html[data-theme="apple"] .dropdown-menu,
html[data-theme="apple"] .dropdown-menu-dark {
    background: #ffffff;
    border: 1px solid #e6e6e8;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
html[data-theme="apple"] .dropdown-menu-dark .dropdown-item,
html[data-theme="apple"] .dropdown-menu .dropdown-item {
    color: #1d1d1f;
}
html[data-theme="apple"] .dropdown-menu-dark .dropdown-item:hover,
html[data-theme="apple"] .dropdown-menu .dropdown-item:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}
html[data-theme="apple"] .dropdown-menu-dark .dropdown-divider,
html[data-theme="apple"] .dropdown-menu .dropdown-divider {
    border-color: #e6e6e8;
}
html[data-theme="apple"] .dropdown-menu-dark .dropdown-item-text {
    color: #86868b;
}

/* ------------------------------------------------------------
   5) Cards — 28px radius, flat, hairline outline
   ------------------------------------------------------------ */
html[data-theme="apple"] .card {
    border-radius: 28px;
    box-shadow: 0 0 0 1px #e6e6e8;
    border-color: transparent;
}
html[data-theme="apple"] .card:hover {
    box-shadow: 0 0 0 1px #d6d6d6;
    transform: none;
    border-color: transparent;
}
html[data-theme="apple"] .card-header,
html[data-theme="apple"] .card-footer {
    background: #ffffff;
    border-color: #e6e6e8;
}
html[data-theme="apple"] .card-header {
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}
html[data-theme="apple"] .card-footer {
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}

/* ------------------------------------------------------------
   6) Buttons — pills, flat Apple blue
   ------------------------------------------------------------ */
html[data-theme="apple"] .btn { border-radius: 9999px; }
html[data-theme="apple"] .btn-primary {
    background: #0071e3 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
html[data-theme="apple"] .btn-primary:hover,
html[data-theme="apple"] .btn-primary:active {
    background: #0066cc !important;
    box-shadow: none !important;
    transform: none !important;
    color: #ffffff !important;
}
html[data-theme="apple"] .btn-outline-primary {
    border: 1px solid #0071e3 !important;
    color: #0071e3 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html[data-theme="apple"] .btn-outline-primary:hover {
    background: #0071e3 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}
html[data-theme="apple"] .btn-outline-secondary {
    border: 1px solid #d6d6d6 !important;
    color: #1d1d1f !important;
    box-shadow: none !important;
}
html[data-theme="apple"] .btn-outline-secondary:hover {
    border-color: #1d1d1f !important;
    color: #1d1d1f !important;
    background: #f5f5f7 !important;
}
html[data-theme="apple"] .btn-link { color: #0066cc !important; }

/* ------------------------------------------------------------
   7) Forms — 12px inputs, Apple focus ring
   ------------------------------------------------------------ */
html[data-theme="apple"] .form-control,
html[data-theme="apple"] .form-select {
    border: 1px solid #d6d6d6 !important;
    border-radius: 12px !important;
}
html[data-theme="apple"] .form-control:focus,
html[data-theme="apple"] .form-select:focus {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}
html[data-theme="apple"] .input-group-text {
    border: 1px solid #d6d6d6 !important;
    border-radius: 12px !important;
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
}
html[data-theme="apple"] input,
html[data-theme="apple"] select,
html[data-theme="apple"] textarea {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}
html[data-theme="apple"] .form-check-input:checked {
    background-color: #0071e3;
    border-color: #0071e3;
}
html[data-theme="apple"] .form-check-input:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 0.2rem rgba(0, 113, 227, 0.2);
}

/* ------------------------------------------------------------
   8) Tables — Ink text, mist header band
   ------------------------------------------------------------ */
html[data-theme="apple"] table, html[data-theme="apple"] thead,
html[data-theme="apple"] tbody, html[data-theme="apple"] tfoot,
html[data-theme="apple"] tr, html[data-theme="apple"] td,
html[data-theme="apple"] th {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
}
html[data-theme="apple"] .table-modern thead th {
    background: #f5f5f7;
    color: #1d1d1f !important;
}
html[data-theme="apple"] .table-modern tbody tr:hover { background: #f5f5f7; }

/* ------------------------------------------------------------
   9) Bootstrap utility accents -> Apple blue
   ------------------------------------------------------------ */
html[data-theme="apple"] .text-primary { color: #0071e3 !important; -webkit-text-fill-color: #0071e3 !important; }
html[data-theme="apple"] .link-primary { color: #0066cc !important; }
html[data-theme="apple"] .bg-primary { background-color: #0071e3 !important; }
html[data-theme="apple"] .bg-primary-subtle { background-color: #eaf3fd !important; }
html[data-theme="apple"] .border-primary { border-color: #0071e3 !important; }
html[data-theme="apple"] .progress-bar { background-color: #0071e3; }
html[data-theme="apple"] .page-link { color: #0066cc; border-color: #e6e6e8; }
html[data-theme="apple"] .page-item.active .page-link {
    background-color: #0071e3; border-color: #0071e3; color: #fff;
}
html[data-theme="apple"] .nav-pills .nav-link.active {
    background-color: #0071e3; color: #fff;
}
html[data-theme="apple"] .nav-tabs .nav-link.active { color: #0071e3; }
html[data-theme="apple"] .list-group-item.active {
    background-color: #0071e3; border-color: #0071e3; color: #fff;
}
html[data-theme="apple"] .badge.bg-primary { background-color: #0071e3 !important; }

/* ------------------------------------------------------------
   10) Metric / stat / window controls
   ------------------------------------------------------------ */
html[data-theme="apple"] .metric-card { border-radius: 28px; }
html[data-theme="apple"] .metric-card .metric-value { color: #1d1d1f !important; }
html[data-theme="apple"] .window-btn { color: #0066cc !important; }
html[data-theme="apple"] .window-btn:hover { background: #f5f5f7; color: #0066cc !important; }
html[data-theme="apple"] .window-btn.active {
    background: #0071e3; color: #ffffff !important; box-shadow: none;
}

/* ------------------------------------------------------------
   11) Profile header — light (was a blue gradient)
   ------------------------------------------------------------ */
html[data-theme="apple"] .profile-header {
    background: #ffffff;
    color: #1d1d1f;
    border: 1px solid #e6e6e8;
    box-shadow: none;
}
html[data-theme="apple"] .profile-header::before { display: none; }
html[data-theme="apple"] .profile-header .profile-meta { color: #707070; opacity: 1; }

/* ------------------------------------------------------------
   12) Login / register — mist canvas, flat card
   ------------------------------------------------------------ */
html[data-theme="apple"] .login-page { background: #f5f5f7; }
html[data-theme="apple"] .login-page::before,
html[data-theme="apple"] .login-page::after { display: none; }
html[data-theme="apple"] .login-card {
    border-radius: 28px;
    box-shadow: 0 0 0 1px #e6e6e8;
}
html[data-theme="apple"] .login-brand i { color: #0071e3; }
html[data-theme="apple"] .login-brand h2 { color: #1d1d1f; }
html[data-theme="apple"] .login-card .input-group-text {
    background: #f5f5f7; color: #1d1d1f; border-color: #d6d6d6;
}
html[data-theme="apple"] .login-card .form-control:focus,
html[data-theme="apple"] .login-card .input-group:focus-within .input-group-text {
    border-color: #0071e3; box-shadow: 0 0 0 0.2rem rgba(0, 113, 227, 0.15);
}

/* ------------------------------------------------------------
   13) Misc surfaces
   ------------------------------------------------------------ */
html[data-theme="apple"] .app-footer { background: #ffffff; }
html[data-theme="apple"] .alert-info { background: #f5f5f7; color: #1d1d1f; }
html[data-theme="apple"] ::-webkit-scrollbar-track { background: #f5f5f7; }
html[data-theme="apple"] ::-webkit-scrollbar-thumb { background: #d6d6d6; }
html[data-theme="apple"] ::-webkit-scrollbar-thumb:hover { background: #b0b0b0; }
html[data-theme="apple"] .theme-option.active,
html[data-theme="apple"] .font-option.active,
html[data-theme="apple"] .size-option.active {
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

/* ------------------------------------------------------------
   14) Theme preview card (settings page)
   ------------------------------------------------------------ */
.theme-preview-apple { background: #f5f5f7; }
.theme-preview-apple .tp-nav { background: #ffffff; border-bottom: 1px solid #e6e6e8; }
.theme-preview-apple .tp-body { background: #f5f5f7; }
.theme-preview-apple .tp-card { background: #ffffff; border: 1px solid #e6e6e8; }
.theme-preview-apple .tp-card:first-child { background: #eaf3fd; }