@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');

/*
 * Akira CRM — interface (formal).
 *
 * Loaded after each layout's own <style>, so it only restyles: the colour
 * tokens and the shared akira-* components every page is built from, chat
 * included (each user's chat wallpaper and overlay stay their own).
 * Flat surfaces, hairline borders, a business typeface and one restrained
 * gold accent. Removing the one <link> that loads this file restores the
 * layouts' original look.
 */

/* ------------------------------------------------------------------ tokens */

html.dark body.app-shell,
html.dark body.app-auth {
    color-scheme: dark;
    --akira-bg: #0c0d10;
    --akira-hero: #0c0d10;
    --akira-panel: #111317;
    --akira-sidebar: #0f1114;
    --akira-header: #0f1114;
    --akira-card: #14161a;
    --akira-card-soft: #191b20;
    --akira-input: #101216;
    --akira-border: #24272e;
    --akira-border-strong: #343842;
    --akira-accent: #d6a63a;
    --akira-accent-soft: #e2bd6b;
    --akira-accent-deep: #b98a2b;
    --akira-accent-ink: #15110a;
    --akira-muted: #8a8f98;
    --akira-muted-2: #a9aeb6;
    --akira-text: #dfe1e5;
    --akira-heading: #f4f5f7;
    --akira-footer: #6b7079;
    --akira-toggle-bg: #14161a;
    --akira-nav-hover: rgba(255, 255, 255, 0.04);
    --akira-nav-active: rgba(214, 166, 58, 0.1);
    --akira-glow: transparent;
    --akira-ok-bg: rgba(34, 197, 94, 0.08);
    --akira-ok-border: rgba(34, 197, 94, 0.28);
    --akira-ok-text: #86efac;
    --akira-grad: linear-gradient(var(--akira-accent), var(--akira-accent));
    --akira-edge: linear-gradient(var(--akira-border), var(--akira-border));
    --akira-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --akira-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4);
    --akira-shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.45);
    --akira-inset: none;
    --akira-focus: rgba(214, 166, 58, 0.32);
}

html.light body.app-shell,
html.light body.app-auth {
    color-scheme: light;
    --akira-bg: #f4f5f7;
    --akira-hero: #eef0f3;
    --akira-panel: #ffffff;
    --akira-sidebar: #ffffff;
    --akira-header: #ffffff;
    --akira-card: #ffffff;
    --akira-card-soft: #f8f9fa;
    --akira-input: #ffffff;
    --akira-border: #e3e6eb;
    --akira-border-strong: #cfd4db;
    /* Deep gold: readable as text on white and carries white text as a fill. */
    --akira-accent: #9a6a0a;
    --akira-accent-soft: #b07c12;
    --akira-accent-deep: #7d5608;
    --akira-accent-ink: #ffffff;
    --akira-muted: #6b7280;
    --akira-muted-2: #4b5563;
    --akira-text: #1f2329;
    --akira-heading: #0f1217;
    --akira-footer: #9aa0a8;
    --akira-toggle-bg: #ffffff;
    --akira-nav-hover: #f3f4f6;
    --akira-nav-active: rgba(154, 106, 10, 0.08);
    --akira-glow: transparent;
    --akira-ok-bg: #f0fdf4;
    --akira-ok-border: #bbf7d0;
    --akira-ok-text: #15803d;
    --akira-grad: linear-gradient(var(--akira-accent), var(--akira-accent));
    --akira-edge: linear-gradient(var(--akira-border), var(--akira-border));
    --akira-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --akira-shadow-hover: 0 2px 6px rgba(16, 24, 40, 0.08);
    --akira-shadow-pop: 0 10px 28px rgba(16, 24, 40, 0.12);
    --akira-inset: none;
    --akira-focus: rgba(154, 106, 10, 0.22);
}

/* ------------------------------------------------------------------ canvas */

body.app-shell,
body.app-auth {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--akira-bg);
    scrollbar-color: var(--akira-border-strong) transparent;
    -webkit-font-smoothing: antialiased;
}

body.app-shell ::selection,
body.app-auth ::selection {
    background: color-mix(in srgb, var(--akira-accent) 28%, transparent);
    color: var(--akira-heading);
}

body.app-shell a:focus-visible,
body.app-shell button:focus-visible,
body.app-auth a:focus-visible,
body.app-auth button:focus-visible {
    outline: 2px solid var(--akira-accent);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------- sidebar */

body.app-shell [data-sidebar] {
    background: var(--akira-sidebar) !important;
    border-color: var(--akira-border) !important;
    box-shadow: none;
}

/* The "A" badge */
body.app-shell [data-sidebar] > div:first-child > div:first-child {
    background: var(--akira-accent) !important;
    color: var(--akira-accent-ink) !important;
    border-radius: 0.5rem;
    box-shadow: none;
}

/* The "akira." wordmark */
body.app-shell [data-sidebar] > div:first-child p:first-child {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Section labels */
body.app-shell [data-sidebar] nav > div > p {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

body.app-shell .akira-nav-link {
    position: relative;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--akira-muted-2);
    transition: background-color 0.15s, color 0.15s;
}

body.app-shell .akira-nav-link:hover {
    background: var(--akira-nav-hover);
    color: var(--akira-heading);
}

/* The current page: a quiet fill and an accent bar on the left edge */
body.app-shell .akira-nav-link.is-active {
    color: var(--akira-heading);
    font-weight: 600;
    background: var(--akira-nav-active);
    box-shadow: none;
}

body.app-shell .akira-nav-link.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--akira-accent);
}

body.app-shell .akira-nav-link.is-active svg {
    color: var(--akira-accent);
}

/* ------------------------------------------------------------------ header */

body.app-shell header.sticky {
    background: var(--akira-header) !important;
    border-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 var(--akira-border);
}

body.app-shell [data-header-clock] {
    border: 1px solid var(--akira-border);
    background: var(--akira-card) !important;
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}

body.app-shell [data-user-menu-toggle] {
    transition: border-color 0.15s;
}

body.app-shell [data-user-menu-toggle]:hover {
    border-color: var(--akira-border-strong) !important;
}

body.app-shell [data-user-menu-panel],
body.app-shell [data-notif-panel] {
    border-radius: 0.625rem !important;
    box-shadow: var(--akira-shadow-pop), 0 0 0 1px var(--akira-border) !important;
}

/* -------------------------------------------------------------- components */

body.app-shell .akira-card {
    border-radius: 0.625rem;
    border: 1px solid var(--akira-border);
    background: var(--akira-card);
    box-shadow: var(--akira-shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Panels built with inline card colours instead of the class */
body.app-shell:not(.chat-mobile-shell) main [style*="background: var(--akira-card);"],
body.app-shell:not(.chat-mobile-shell) main [style*="background:var(--akira-card);"] {
    box-shadow: var(--akira-shadow);
}

body.app-shell a.akira-card:hover {
    border-color: var(--akira-border-strong);
    box-shadow: var(--akira-shadow-hover);
}

/* Dashboard stat tiles: plain cards, keeping the faint icon in the corner */
body.app-shell .akira-stat-card {
    border: 1px solid var(--akira-border) !important;
    border-radius: 0.625rem !important;
    background: var(--akira-card) !important;
    box-shadow: var(--akira-shadow);
}

body.app-shell .akira-stat-card .text-2xl,
body.app-shell .akira-stat-card .text-3xl {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* The old teal left in some stat tiles becomes the accent */
body.app-shell .akira-stat-card [style*="color-mix(in srgb, #2ec4b6"] {
    color: var(--akira-accent) !important;
    background: color-mix(in srgb, var(--akira-accent) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--akira-accent) 30%, transparent) !important;
}

body.app-shell .akira-stat-card [style*="#2ec4b6"]:not([style*="color-mix"]) {
    color: var(--akira-accent) !important;
}

/* Buttons */
body.app-shell .akira-btn-primary,
body.app-auth .akira-btn-primary {
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: var(--akira-accent);
    color: var(--akira-accent-ink);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transform: none;
    transition: background-color 0.15s, box-shadow 0.15s;
}

body.app-shell .akira-btn-primary:hover,
body.app-auth .akira-btn-primary:hover {
    background: var(--akira-accent-deep);
    color: var(--akira-accent-ink);
    transform: none;
    filter: none;
}

body.app-shell .akira-btn-primary:active,
body.app-auth .akira-btn-primary:active {
    box-shadow: none;
}

body.app-shell .akira-btn-primary:disabled,
body.app-auth .akira-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

body.app-shell .akira-btn-ghost {
    border-radius: 0.5rem;
    border: 1px solid var(--akira-border-strong);
    background: var(--akira-card);
    color: var(--akira-text);
    font-weight: 500;
    transform: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

body.app-shell .akira-btn-ghost:hover {
    background: var(--akira-card-soft);
    border-color: var(--akira-border-strong);
    color: var(--akira-heading);
    transform: none;
    box-shadow: none;
}

body.app-shell .akira-icon-btn {
    border-radius: 0.5rem;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

body.app-shell .akira-icon-btn:hover {
    border-color: var(--akira-border-strong);
    background: var(--akira-card-soft);
    color: var(--akira-heading);
    box-shadow: none;
}

body.app-shell .akira-icon-btn[style*="#ef4444"]:hover {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
}

/* Inputs */
body.app-shell .akira-input,
body.app-auth .akira-input {
    border-radius: 0.5rem;
    border-color: var(--akira-border-strong);
    background: var(--akira-input);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body.app-shell .akira-input:focus,
body.app-auth .akira-input:focus {
    border-color: var(--akira-accent);
    box-shadow: 0 0 0 3px var(--akira-focus);
}

body.app-shell .akira-input::placeholder {
    color: var(--akira-footer);
}

/* ------------------------------------------------------------------ content */

body.app-shell main h1 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

body.app-shell main h2 {
    letter-spacing: -0.005em;
}

body.app-shell main table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--akira-muted);
    background: var(--akira-card-soft);
}

body.app-shell main table tbody tr {
    transition: background-color 0.12s;
}

body.app-shell main table tbody tr:hover {
    background: var(--akira-card-soft);
}

/* Flash message after an action */
body.app-shell main > .rounded-xl[style*="--akira-ok"] {
    border-radius: 0.5rem !important;
    box-shadow: inset 3px 0 0 #22c55e;
}

/* Laravel's pagination ships light-only Tailwind colours */
body.app-shell nav[role='navigation'] a,
body.app-shell nav[role='navigation'] span > span {
    background: var(--akira-card) !important;
    border-color: var(--akira-border) !important;
    color: var(--akira-text) !important;
}

body.app-shell nav[role='navigation'] a:hover {
    background: var(--akira-card-soft) !important;
    color: var(--akira-heading) !important;
}

body.app-shell nav[role='navigation'] [aria-current='page'] > span {
    background: var(--akira-accent) !important;
    border-color: var(--akira-accent) !important;
    color: var(--akira-accent-ink) !important;
}

body.app-shell nav[role='navigation'] p {
    color: var(--akira-muted) !important;
}

/* ------------------------------------------------------------------ sign-in */

body.app-auth section[style*="--akira-hero"] {
    background: var(--akira-hero) !important;
}

/* -------------------------------------------------------------------- chat */
/*
 * Chat hub, notifications and settings — in the browser and as the installed
 * Akira Chat app. Each user's wallpaper and overlay stay untouched.
 */

body.app-shell .akira-chat-rail,
body.app-shell .akira-chat-main > .akira-chat,
body.app-shell .akira-chat-main-empty,
body.app-shell .chat-settings-card {
    border: 1px solid var(--akira-border) !important;
    border-radius: 0.625rem;
    background: var(--akira-card);
    box-shadow: var(--akira-shadow);
}

body.app-shell .akira-chat-rail-head,
body.app-shell .akira-chat-head,
body.app-shell .akira-wa-list-head {
    border-bottom-color: var(--akira-border);
}

body.app-shell .akira-chat-head,
body.app-shell .akira-wa-list-head {
    background: var(--akira-card);
}

body.app-shell .akira-chat-rail-item {
    border-radius: 0.5rem;
}

body.app-shell .akira-chat-rail-item:hover {
    transform: none;
}

body.app-shell .akira-chat-rail-item.is-active {
    color: var(--akira-heading);
    background: var(--akira-nav-active);
    box-shadow: inset 3px 0 0 var(--akira-accent);
}

/* Messages: mine on the accent, theirs on the card */
body.app-shell .akira-chat-row.is-mine .akira-chat-bubble {
    background: var(--akira-accent);
    color: var(--akira-accent-ink);
}

body.app-shell .akira-chat-row.is-mine .akira-chat-bubble a:not([class]) {
    color: inherit;
    text-decoration: underline;
}

body.app-shell .akira-chat-row:not(.is-mine) .akira-chat-bubble {
    border-color: var(--akira-border);
}

body.app-shell .akira-chat-row.is-mine .akira-chat-doc {
    background: color-mix(in srgb, var(--akira-accent-ink) 10%, transparent);
    border-color: color-mix(in srgb, var(--akira-accent-ink) 22%, transparent);
    color: var(--akira-accent-ink);
}

body.app-shell .akira-chat-row.is-mine .akira-chat-doc .akira-chat-doc-ico {
    background: color-mix(in srgb, var(--akira-accent-ink) 14%, transparent);
    color: var(--akira-accent-ink);
}

body.app-shell .akira-chat-row.is-mine .akira-voice-play {
    background: var(--akira-accent-ink);
    color: var(--akira-accent);
}

body.app-shell .akira-chat-row.is-mine .akira-voice-bars span {
    background: color-mix(in srgb, var(--akira-accent-ink) 28%, transparent);
}

body.app-shell .akira-chat-row.is-mine .akira-voice-bars span.is-played {
    background: var(--akira-accent-ink);
    box-shadow: none;
}

body.app-shell .akira-chat-row.is-mine .akira-voice-time {
    color: color-mix(in srgb, var(--akira-accent-ink) 75%, transparent);
}

body.app-shell .akira-video-big-play {
    background: var(--akira-accent);
    color: var(--akira-accent-ink);
}

/* The hub's video player was tinted teal */
body.app-shell .akira-chat-video {
    background: #0b0c0f;
}

body.app-shell .akira-video-screen,
body.app-shell .akira-video-screen video,
body.app-shell .akira-video-lightbox-panel {
    background: #07080a;
}

body.app-shell .akira-video-controls,
body.app-shell .akira-chat-preview-video {
    background: linear-gradient(180deg, #16181d, #0c0d10);
}

body.app-shell .akira-chat-composer {
    border-top-color: var(--akira-border);
}

body.app-shell .akira-chat-composer .akira-input {
    border-radius: 999px;
}

/* App bottom bar (phone browser + installed app) */
body.app-shell .chat-pwa-nav {
    background: var(--akira-header);
    border-top-color: var(--akira-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.app-shell .chat-pwa-nav a,
body.app-shell .chat-pwa-nav button {
    border-radius: 0.5rem;
}

body.app-shell .chat-pwa-nav a.is-active,
body.app-shell .chat-pwa-nav button.is-active {
    color: var(--akira-accent);
    background: var(--akira-nav-active);
}

body.app-shell .chat-pwa-nav a.is-active::before,
body.app-shell .chat-pwa-nav button.is-active::before {
    content: '';
    position: absolute;
    top: -0.45rem;
    left: 34%;
    right: 34%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--akira-accent);
}

body.app-shell .pwa-install-fab {
    background: var(--akira-accent);
    color: var(--akira-accent-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Notifications */
body.app-shell .notif-tabs {
    border-radius: 0.625rem;
}

body.app-shell .notif-tab {
    border-radius: 0.45rem;
}

body.app-shell .notif-item {
    border-radius: 0.625rem;
}

body.app-shell .notif-item.is-unread {
    border-color: var(--akira-border);
    background: var(--akira-card);
    box-shadow: inset 3px 0 0 var(--akira-accent);
}

/* Settings */
body.app-shell .chat-settings-preview-bubble.is-mine {
    background: var(--akira-accent);
    color: var(--akira-accent-ink);
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
    body.app-shell *,
    body.app-auth * {
        transition: none !important;
    }
}