/*
 * Alberton Guesthouse — Owner Dashboard UI Layer
 * Visual-only stylesheet. Operational behaviour and PHP logic stay unchanged.
 */

:root {
    --agh-dash-ink: #252921;
    --agh-dash-muted: #6e7367;
    --agh-dash-nav: #2e3329;
    --agh-dash-nav-hover: #f0f1eb;
    --agh-dash-bg: #f5f4ef;
    --agh-dash-surface: #fff;
    --agh-dash-line: #dddeda;
    --agh-dash-line-soft: #ebebe7;
    --agh-dash-radius: 12px;
    --agh-dash-radius-lg: 16px;
}

body[data-agh-surface="dashboard"] {
    background: var(--agh-dash-bg) !important;
    color: var(--agh-dash-ink);
    -webkit-font-smoothing: antialiased;
}

body[data-agh-surface="dashboard"] .font-display,
body[data-agh-surface="dashboard"] h1,
body[data-agh-surface="dashboard"] h2,
body[data-agh-surface="dashboard"] h3 {
    font-family: "DM Sans", sans-serif !important;
    letter-spacing: -.025em !important;
}

body[data-agh-surface="dashboard"] h1 { line-height: 1.12; }
body[data-agh-surface="dashboard"] p { text-wrap: pretty; }

body[data-agh-surface="dashboard"] a:focus-visible,
body[data-agh-surface="dashboard"] button:focus-visible,
body[data-agh-surface="dashboard"] input:focus-visible,
body[data-agh-surface="dashboard"] select:focus-visible,
body[data-agh-surface="dashboard"] textarea:focus-visible {
    outline: 3px solid rgba(102, 109, 85, .28) !important;
    outline-offset: 2px !important;
}

/* Navigation becomes a calm operational rail. */
body[data-agh-surface="dashboard"] aside#sidebar,
body[data-agh-surface="dashboard"] > div > aside,
body[data-agh-surface="dashboard"] aside[class*="border-r"] {
    background: #fff !important;
    border-color: var(--agh-dash-line) !important;
}

body[data-agh-surface="dashboard"] aside nav a {
    border-radius: 8px !important;
    min-height: 42px;
}

body[data-agh-surface="dashboard"] aside nav a[class*="bg-brand-950"] {
    background: var(--agh-dash-nav) !important;
}

body[data-agh-surface="dashboard"] aside nav a:not([class*="bg-brand-950"]):hover {
    background: var(--agh-dash-nav-hover) !important;
}

body[data-agh-surface="dashboard"] main {
    background: var(--agh-dash-bg);
}

/* Headers and top actions stay compact. */
body[data-agh-surface="dashboard"] main > div > header,
body[data-agh-surface="dashboard"] main header {
    background: rgba(245, 244, 239, .97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body[data-agh-surface="dashboard"] button,
body[data-agh-surface="dashboard"] a[class*="rounded-xl"],
body[data-agh-surface="dashboard"] a[class*="rounded-2xl"] {
    border-radius: 9px !important;
}

body[data-agh-surface="dashboard"] [class*="shadow-soft"],
body[data-agh-surface="dashboard"] [class*="shadow-xl"],
body[data-agh-surface="dashboard"] [class*="shadow-lg"] {
    box-shadow: none !important;
}

/* Dashboard surfaces should read as work areas, not floating cards. */
body[data-agh-surface="dashboard"] section[class*="border"][class*="bg-white"],
body[data-agh-surface="dashboard"] article[class*="border"][class*="bg-white"],
body[data-agh-surface="dashboard"] div[class*="border"][class*="bg-white"] {
    border-color: var(--agh-dash-line) !important;
}

body[data-agh-surface="dashboard"] section[class*="rounded-["],
body[data-agh-surface="dashboard"] article[class*="rounded-["],
body[data-agh-surface="dashboard"] div[class*="rounded-["][class*="border"] {
    border-radius: var(--agh-dash-radius-lg) !important;
}

/* Inputs: predictable, compact and non-technical. */
body[data-agh-surface="dashboard"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body[data-agh-surface="dashboard"] select,
body[data-agh-surface="dashboard"] textarea {
    border-color: var(--agh-dash-line) !important;
    border-radius: 9px !important;
    background: #fff;
    min-height: 42px;
}

body[data-agh-surface="dashboard"] textarea { min-height: 108px; }

body[data-agh-surface="dashboard"] input:focus,
body[data-agh-surface="dashboard"] select:focus,
body[data-agh-surface="dashboard"] textarea:focus {
    border-color: #737b64 !important;
    box-shadow: 0 0 0 3px rgba(102,109,85,.10);
}

/* Tables are first-class operational UI. */
body[data-agh-surface="dashboard"] table {
    font-variant-numeric: tabular-nums;
}

body[data-agh-surface="dashboard"] table thead {
    background: #f7f7f3;
}

body[data-agh-surface="dashboard"] table th {
    color: #72776c !important;
    font-size: 11px !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
}

body[data-agh-surface="dashboard"] table td,
body[data-agh-surface="dashboard"] table th {
    border-color: var(--agh-dash-line-soft) !important;
}

body[data-agh-surface="dashboard"] table tbody tr:hover {
    background: #fafaf7;
}

/* Status badges remain semantic but quiet. */
body[data-agh-surface="dashboard"] [class*="bg-green-50"] {
    background: #edf3ed !important;
    color: #31543c !important;
}
body[data-agh-surface="dashboard"] [class*="bg-red-50"] {
    background: #f8eeee !important;
    color: #7a3936 !important;
}
body[data-agh-surface="dashboard"] [class*="bg-amber-50"] {
    background: #f7f1e4 !important;
    color: #765925 !important;
}
body[data-agh-surface="dashboard"] [class*="bg-blue-50"] {
    background: #eef2f3 !important;
    color: #38545a !important;
}

/* Overview: operational metrics are compact, not giant analytics cards. */
body[data-agh-page="dashboard-home"] main section.mt-8.grid:first-of-type {
    gap: 1px !important;
    overflow: hidden;
    border: 1px solid var(--agh-dash-line);
    border-radius: var(--agh-dash-radius-lg);
    background: var(--agh-dash-line-soft);
}

body[data-agh-page="dashboard-home"] main section.mt-8.grid:first-of-type article {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 1.05rem 1.15rem !important;
    min-height: 118px;
}

body[data-agh-page="dashboard-home"] main section.mt-8.grid:first-of-type article [class*="h-11"],
body[data-agh-page="dashboard-home"] main section.mt-8.grid:first-of-type article [class*="h-10"] {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
}

body[data-agh-page="dashboard-home"] main section.mt-8.grid:first-of-type article [class*="text-3xl"],
body[data-agh-page="dashboard-home"] main section.mt-8.grid:first-of-type article [class*="text-4xl"] {
    font-size: 1.7rem !important;
}

/* Calendar: colour helps, but shape/text remain visible. */
body[data-agh-page="dashboard-calendar"] [class*="rounded-xl"],
body[data-agh-page="dashboard-calendar"] [class*="rounded-2xl"] {
    border-radius: 8px !important;
}

/* CMS and media: labels read like owner tasks. */
body[data-agh-page="dashboard-settings"] main section,
body[data-agh-page="dashboard-page-editor"] main section,
body[data-agh-page="dashboard-media"] main section {
    background: #fff;
}

/* Make sticky save controls useful without feeling like floating glass. */
body[data-agh-surface="dashboard"] .sticky[class*="bottom"] {
    background: linear-gradient(to top, var(--agh-dash-bg) 62%, rgba(245,244,239,0));
    padding-top: 1rem;
}

/* Mobile: sidebar remains a drawer and working space gets priority. */
@media (max-width: 1023px) {
    body[data-agh-surface="dashboard"] main {
        min-width: 0;
    }

    body[data-agh-surface="dashboard"] #sidebar.flex {
        box-shadow: 18px 0 45px rgba(36,39,31,.14) !important;
    }

    body[data-agh-surface="dashboard"] main h1 {
        font-size: 1.65rem !important;
    }

    body[data-agh-surface="dashboard"] main [class*="text-4xl"] {
        font-size: 2rem !important;
    }
}

@media (max-width: 639px) {
    body[data-agh-surface="dashboard"] main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    body[data-agh-surface="dashboard"] section[class*="p-6"],
    body[data-agh-surface="dashboard"] article[class*="p-6"] {
        padding: 1rem !important;
    }

    body[data-agh-surface="dashboard"] table {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-agh-surface="dashboard"] *,
    body[data-agh-surface="dashboard"] *::before,
    body[data-agh-surface="dashboard"] *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}