/*
 * assets/css/admin-theme.css
 * The first page's colours and spacing (index.php / shops-list.css) for:
 *   - the PLATFORM ADMINISTRATOR's pages and admin/login.php (user request,
 *     2026-11-12: "ipareho mo yung color and spacing sa administrator page
 *     and yung color sa pag log in sa administrator"), and
 *   - the CUSTOMER's signed-in pages (same day: "gawin mo din design dun pag
 *     nag login ako sa customers login pero dapat ganun padin nakasulat")
 *     -- colours and spacing only, every word on those pages is unchanged.
 *
 * includes/header.php loads it, and adds body.page-app--fp, ONLY for the
 * roles admin and customer; admin/login.php adds body.page-admin-login.
 * Shop owners and shop admins never load it, so their pages are unchanged.
 * Tokens first, then a few component rules; no blur, no fixed backgrounds
 * (no-heavy-effects rule). Always light.
 */

/* ---------- Shared first-page palette ---------- */

.page-app--fp,
.page-app--fp .app-main,
.page-admin-login {
    --font:           "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

    --brand:          #1D5BD8;
    --brand-strong:   #1546A8;
    --brand-deep:     #0E1B33;
    --brand-bright:   #93C5FD;
    --brand-wash:     #E8EFFD;
    --brand-mist:     #EEF4FF;
    --brand-tint:     rgba(29, 91, 216, .10);
    --brand-line:     #BFD0EE;
    --brand-ring:     rgba(29, 91, 216, .22);
    --palabahan-orange: #1D5BD8;   /* (blue -- the name is historical) */
    --palabahan-yellow: #93C5FD;
    --palabahan-dark:   #0E1B33;

    --text:           #0E1B33;
    --text-soft:      #33415A;
    --text-muted:     #52617A;
    --text-faint:     #8391A8;

    --bg:             #F5F7FB;
    --bg-deep:        #F5F7FB;
    --ice:            #F5F7FB;
    --ice-deep:       #F5F7FB;
    --ice-mist:       #FFFFFF;
    --surface:        #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-sunken: #F7F9FC;
    --border:         #E3E8F0;
    --border-strong:  #D3DCE8;
    --border-input:   #C9D3E2;

    --radius-sm:      10px;
    --radius:         16px;
    --radius-lg:      20px;
}

/* ---------- Dashboard (platform admin) ---------- */

body.page-app--fp {
    background: var(--bg);   /* flat, like the first page: no radial glow */
    font-family: var(--font);
}

.page-app--fp {
    --sidebar-bg:       #0E1B33;   /* the first page's navy */
    --sidebar-bg-soft:  #1A2A47;
    --sidebar-active:   #1D5BD8;
}

/* White top bar, like the first page's header. */
.page-app--fp .topbar {
    --text:           #0E1B33;
    --text-soft:      #33415A;
    --text-muted:     #52617A;
    --text-faint:     #8391A8;
    --surface:        #FFFFFF;
    --surface-sunken: #F7F9FC;
    --border:         #E3E8F0;
    --border-strong:  #D3DCE8;
    --border-input:   #C9D3E2;
    --brand:          #1D5BD8;
    --brand-strong:   #1546A8;
    --brand-wash:     #E8EFFD;

    background: #FFFFFF;
    border-bottom: 1px solid #E3E8F0;
    box-shadow: 0 2px 12px rgba(14, 27, 51, .06);
}
.page-app--fp .topbar-page { color: #0E1B33; font-weight: 800; }
.page-app--fp .navtoggle { color: #0E1B33; }

/* Spacing: the first page's 24px rhythm. */
.page-app--fp .container { padding: 36px 32px 72px; }
.page-app--fp .page-header { margin-bottom: 28px; }
.page-app--fp .page-header h1 { font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
.page-app--fp .page-header .subtitle { color: var(--text-muted); }

.page-app--fp .panel {
    padding: 28px;
    margin-bottom: 24px;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(14, 27, 51, .04);
}
.page-app--fp .card { border-radius: 16px; box-shadow: none; }

/* Tables: white rows, a pale blue head. */
.page-app--fp .table thead th,
.page-app--fp .table-wrap .table thead th {
    background: #F2F6FC;
    color: #52617A;
}
.page-app--fp .table-wrap { background: #FFFFFF; border-color: var(--border); border-radius: 16px; }
.page-app--fp .table tbody tr,
.page-app--fp .table tbody td { background: #FFFFFF; }
.page-app--fp .table tbody tr:hover td { background: #F7FAFF; }

/* Buttons: flat first-page blue, 12px corners. Ghost and danger keep their
   outline look (only their colours follow the tokens above). */
.page-app--fp .btn {
    background: #1D5BD8;
    border-color: #1D5BD8;
    border-radius: 12px;
    font-weight: 700;
}
.page-app--fp .btn:hover { background: #1546A8; border-color: #1546A8; }
.page-app--fp .btn--ghost {
    background: #FFFFFF;
    border-color: #BFD0EE;
    color: #1546A8;
}
.page-app--fp .btn--ghost:hover { background: #EEF4FF; border-color: #1D5BD8; }
.page-app--fp .btn--danger {
    color: var(--danger);
    background: #FFFFFF;
    border-color: var(--danger-line);
}
.page-app--fp .btn--danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

@media (max-width: 720px) {
    .page-app--fp .container { padding: 24px 16px 56px; }
    .page-app--fp .panel { padding: 20px; }
    .page-app--fp .page-header h1 { font-size: 26px; }
}

/* ---------- Admin login (admin/login.php) ---------- */

body.page-admin-login {
    background: #F5F7FB;
    font-family: var(--font);
    --fc-background: #F5F7FB;
    --fc-surface:    #FFFFFF;
    --fc-border:     #E3E8F0;
    --fc-text:       #0E1B33;
    --fc-accent:     #1D5BD8;
    --fc-primary:    #1546A8;
    --fc-primary-hover: #1546A8;
}

/* The header goes white with blue words, like the first page. */
.page-admin-login .portal-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E3E8F0;
    box-shadow: 0 2px 12px rgba(14, 27, 51, .06);
}
.page-admin-login .portal-mark-name { color: #1546A8; }
.page-admin-login .portal-mark-sub  { color: #52617A; }
.page-admin-login .portal-nav-link  { color: #33415A; }
.page-admin-login .portal-nav-link:hover,
.page-admin-login .portal-nav-link.is-current { background: #EEF4FF; color: #1546A8; }
.page-admin-login .portal-nav,
.page-admin-login .portal-nav-actions { border-color: #E3E8F0; }
.page-admin-login .portal-help { background: #F5F7FB; border-color: #E3E8F0; color: #0E1B33; }
.page-admin-login .portal-help svg { stroke: #1D5BD8; }
.page-admin-login .portal-nav-actions .btn,
.page-admin-login .auth-card--admin .btn { background: #1D5BD8; border-color: #1D5BD8; color: #fff; border-radius: 12px; }
.page-admin-login .portal-nav-actions .btn:hover,
.page-admin-login .auth-card--admin .btn:hover { background: #1546A8; border-color: #1546A8; }

/* The card: white, 20px corners, the first page's soft shadow. */
.page-admin-login .auth-card {
    background: #FFFFFF;
    border: 1px solid #E3E8F0;
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(14, 27, 51, .08);
    color: #0E1B33;
}
.page-admin-login .auth-card::before { background: #1D5BD8; }
.page-admin-login .auth-card input {
    background: #FFFFFF;
    border-color: #C9D3E2;
    border-radius: 12px;
    color: #0E1B33;
}
.page-admin-login .auth-card input:focus { border-color: #1D5BD8; box-shadow: 0 0 0 3px rgba(29, 91, 216, .18); }

/* The "For platform administrators..." note: a pale blue tag like the first
   page's section labels, instead of the navy block. */
.page-admin-login .auth-card--admin .auth-note {
    background: #EEF4FF;
    border-color: #BFD3F7;
    border-left-color: #1D5BD8;
    color: #33415A;
}
.page-admin-login .auth-card--admin .auth-note strong { color: #0E1B33; }
.page-admin-login .auth-card--admin .auth-note svg { stroke: #1D5BD8; }

.page-admin-login .backlink a { background: #FFFFFF; border-color: #E3E8F0; color: #1546A8; }

/* The footer stays navy, the first page's footer colour. */
.page-admin-login .portal-foot { background: #0E1B33; }

/* Help pill and phone menu button on the white admin-login header. */
.page-admin-login .portal-help-key { color: #52617A; }
.page-admin-login .portal-help-num { color: #0E1B33; }
.page-admin-login .portal-navtoggle { background: #F5F7FB; border-color: #E3E8F0; color: #0E1B33; }

/* Form fields on the admin pages: white, like the first page's inputs. */
.page-app--fp .app-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.page-app--fp .app-main select,
.page-app--fp .app-main textarea {
    background-color: #FFFFFF;
    border-color: #C9D3E2;
}

/* ---------- Customer Home hero, like the first page's photo hero ----------
   Same words as before (dashboards/home.php is untouched); only the look:
   navy wash from the left, sentence-case headline, the greeting as a pill,
   and the first page's wave at the bottom (one static SVG in the overlay). */
.page-app--fp .home-banner:not(.home-banner--preview) {
    min-height: clamp(380px, 44vw, 560px);
    padding-bottom: calc(clamp(26px, 5vw, 52px) + 56px);
}
.page-app--fp .home-banner:not(.home-banner--preview)::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34c240-30 480-30 720-8s480 26 720-6v40H0z' fill='%23F5F7FB'/%3E%3C/svg%3E") left bottom -1px / 100% 56px no-repeat,
        linear-gradient(90deg, rgba(10, 22, 46, .94) 0%, rgba(10, 22, 46, .80) 42%, rgba(10, 22, 46, .30) 100%);
}
.page-app--fp .home-banner-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
}
.page-app--fp .home-banner-title {
    font-size: clamp(36px, 5.6vw, 60px);
    text-transform: none;
    letter-spacing: -.02em;
    text-shadow: none;
}
.page-app--fp .home-banner-sub { color: #D6DEEC; text-shadow: none; }
.page-app--fp .home-banner .btn { min-height: 52px; padding: 0 26px; border-radius: 14px; font-size: 15px; }
.page-app--fp .home-banner .btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}
.page-app--fp .home-banner .btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

@media (max-width: 720px) {
    .page-app--fp .home-banner:not(.home-banner--preview)::after {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34c240-30 480-30 720-8s480 26 720-6v40H0z' fill='%23F5F7FB'/%3E%3C/svg%3E") left bottom -1px / 100% 40px no-repeat,
            linear-gradient(180deg, rgba(10, 22, 46, .82) 0%, rgba(10, 22, 46, .9) 100%);
    }
}

/* Empty boxes ("You have not booked anything...") like the first page's:
   a near-white fill with a dashed edge, instead of the grey-blue block. */
.page-app--fp .empty {
    background: #F7F9FC;
    border: 1px dashed #C9D3E2;
    border-radius: 16px;
    color: #52617A;
}