/**
 * ------------------------------------------------------------
 * 🧱 Core Application Layout (core.css)
 * ------------------------------------------------------------
 * Global resets, layout shell, background mesh, header/footer,
 * responsive design rules, and utility classes used across
 * the entire Quooter application.
 *
 * This file:
 *   - Uses only CSS variables from theme (see CSS.md)
 *   - Provides a centered desktop layout with internal scroll
 *   - Expands to true full-screen mode on mobile 📱
 *   - Implements soft mesh backgrounds for depth 🎨
 *
 * @package Quooter\Core
 * @version 1.0
 * @license G2B2
 */

/* ============================================================
   🧩 Root Variables (default-light fallback)
============================================================ */
:root {
    /**
    * ------------------------------------------------------------
    * 💬 Main font and width
    * ------------------------------------------------------------
    */
    --font-family-main: "Inter", "Segoe UI", Roboto, sans-serif;
    --font-size-base: 16px; /* Default body font size */
    --font-size-small: 14px; /* Smaller text (labels, captions) */
    --font-size-large: 32px; /* Headings or emphasis */
    --line-height-base: 1.5; /* Default line height */
    --line-height-heading: 1.2; /* For headings */

    --max-content-width: 800px; /* Main content container max width */
    --container-padding: 8px; /* Inner padding for containers */
    --container-margin: auto; /* Centered layout */
    --header-height: 64px; /* Header's height */

    /**
    * ------------------------------------------------------------
    * 🧾 Core Colors & Backgrounds
    * ------------------------------------------------------------
    */
    --colour-bg: #fff8f0;
    --colour-bg-deep1: #ffeedd;
    --colour-bg-deep2: #ffecd5;
    --colour-bg-highlight: #fff2e6;
    --colour-bg-inner-shadow: rgba(0, 0, 0, 0.05);

    --colour-text: #333333;
    --colour-on-accent: #ffffff;
    --colour-border: #f0c19e;

    /**
    * ------------------------------------------------------------
    * 🧠 Links & transitions
    * ------------------------------------------------------------
    */
    --colour-link: #ff8c42;
    --colour-link-hover: #ffa65c;
    --transition-speed: 0.3s;

    /**
    * ------------------------------------------------------------
    * 🍧 Logo Colour
    * ------------------------------------------------------------
    */

    --colour-logo-bg: linear-gradient(
        135deg,
        var(--colour-accent) 0%,
        var(--colour-accent) 70%,
        var(--colour-link) 100%
    );

    /**
    * ------------------------------------------------------------
    * 🧠 Semantic alerts
    * ------------------------------------------------------------
    */
    --colour-success-bg: #e6fff4;
    --colour-success-text: #0a7a3e;
    --colour-success-border: #33c37d;

    --colour-danger-bg: #fff1f0;
    --colour-danger-text: #c41e3a;
    --colour-danger-border: #ff4d4f;

    --colour-warning-bg: #fff8e6;
    --colour-warning-text: #ad8b00;
    --colour-warning-border: #ffcc66;

    --colour-info-bg: #e6f0ff;
    --colour-info-text: #1c7ed6;
    --colour-info-border: #74c0fc;

    /**
    * ------------------------------------------------------------
    * 📦 Buttons - Confirm (Primary)
    * ------------------------------------------------------------
    */
    --btn-confirm-start: #ff7f50; /* Coral Orange */
    --btn-confirm-end: #ffa65c; /* Light Orange */
    --btn-confirm-gradient: linear-gradient(135deg, var(--btn-confirm-start) 0%, var(--btn-confirm-end) 100%);
    --btn-confirm-hover-start: #ff904d;
    --btn-confirm-hover-end: #ffb077;
    --btn-confirm-hover-gradient: linear-gradient(
        135deg,
        var(--btn-confirm-hover-start) 0%,
        var(--btn-confirm-hover-end) 100%
    );
    --btn-confirm-focus-start: #ff6f3d;
    --btn-confirm-focus-end: #ff9a5c;
    --btn-confirm-focus-gradient: linear-gradient(
        135deg,
        var(--btn-confirm-focus-start) 0%,
        var(--btn-confirm-focus-end) 100%
    );

    /**
    * ------------------------------------------------------------
    * 📦 Buttons - Cancel (Secondary)
    * ------------------------------------------------------------
    */
    --btn-cancel-start: #cccccc; /* Grey base */
    --btn-cancel-end: #eeeeee; /* Light grey */
    --btn-cancel-gradient: linear-gradient(135deg, var(--btn-cancel-start) 0%, var(--btn-cancel-end) 100%);
    --btn-cancel-hover-start: #bbbbbb;
    --btn-cancel-hover-end: #dddddd;
    --btn-cancel-hover-gradient: linear-gradient(
        135deg,
        var(--btn-cancel-hover-start) 0%,
        var(--btn-cancel-hover-end) 100%
    );
    --btn-cancel-focus-start: #aaaaaa;
    --btn-cancel-focus-end: #cccccc;
    --btn-cancel-focus-gradient: linear-gradient(
        135deg,
        var(--btn-cancel-focus-start) 0%,
        var(--btn-cancel-focus-end) 100%
    );
    /**
    * ------------------------------------------------------------
    * 📦 Buttons - Cancel (Secondary)
    * ------------------------------------------------------------
    */
    --quote-status-draft: #6c757d;
    --quote-status-quote: #0d6efd;
    --quote-status-sent: #6610f2;
    --quote-status-accepted: #198754;
    --quote-status-invoiced: #fd7e14;
    --quote-status-paid: #20c997;
    --quote-status-archived: #adb5bd;
    --quote-status-deleted: #dc3545;

    /**
    * ------------------------------------------------------------
    * 
    * 🌑 Towards new Theme Structure
    * 
    * ------------------------------------------------------------
    */

    /**
    * ------------------------------------------------------------
    * 🧠 Infinity Projects
    * ------------------------------------------------------------
    */
    /* ------------------------------------------------------------
       🚦 Task Priority Colours
    ------------------------------------------------------------ */
    --infinity_projects-colour-priority-low: #22c55e;
    --infinity_projects-colour-priority-medium: #eab308;
    --infinity_projects-colour-priority-high: #f97316;
    --infinity_projects-colour-priority-urgent: #dc2626;

    /* ------------------------------------------------------------
       📊 Task Status Colours
    ------------------------------------------------------------ */
    --infinity_projects-colour-status-open: hsl(229, 100%, 88%);
    --infinity_projects-colour-status-ongoing: hsl(188, 100%, 75%);
    --infinity_projects-colour-status-testing: hsl(262, 100%, 75%);
    --infinity_projects-colour-status-completed: hsl(142, 100%, 75%);
}

/* ============================================================
   🔄 Global Reset & Body
============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: var(--font-family-main);
    color: var(--colour-text);
    background-color: var(--colour-bg);
    transition:
        background-color var(--transition-speed) ease,
        color var(--transition-speed) ease;
}

/* Full-height flexible container */
body {
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ============================================================
   📐 Main Application Shell
============================================================ */
.app-main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100dvh;
    height: auto;
    width: 100%;

    max-width: var(--max-content-width);
    margin: 0 auto;

    background-color: var(--colour-bg);
    border-radius: 12px;
    border: 1px solid var(--colour-border);
    box-shadow: 0 4px 8px var(--colour-bg-inner-shadow);

    overflow-y: auto;
    overflow-x: hidden;

    background: radial-gradient(40% 60% at 20% 30%, var(--colour-bg-highlight) 0%, transparent 60%),
        radial-gradient(50% 50% at 80% 20%, var(--colour-bg-inner-shadow) 0%, transparent 70%),
        radial-gradient(60% 60% at 70% 80%, var(--colour-bg-deep2) 0%, transparent 75%),
        radial-gradient(70% 70% at 30% 80%, var(--colour-bg-deep1) 0%, transparent 80%);
    background-blend-mode: screen;
}

/* ============================================================
   🔝 Header
============================================================ */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);

    padding: 0.5rem 1rem;
    background-color: var(--colour-header-bg);
    color: var(--colour-text);

    border-bottom: 1px solid var(--colour-border);
    box-shadow: 0 2px 4px var(--colour-bg-inner-shadow);

    position: sticky;
    top: 0;
    z-index: 10;

    transition: background-color var(--transition-speed) ease;
}

/* ============================================================
   🔧 Header Left Grid Layout
   ============================================================ */

.header-left {
    display: flex;
    gap: 1rem;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-mask-svg {
    height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--colour-logo-bg);
}

.logo-text {
    font-size: var(--font-size-large);
    line-height: var(--line-height-heading);
    color: var(--colour-accent);
    font-weight: 700;
    text-decoration: none;
}

.logo-text:hover {
    color: var(--colour-link-hover);
    text-decoration: none;
}

/* ============================================================
   🔧 Header Right Grid Layout
   ============================================================ */
.header-right {
    display: flex;
    justify-content: flex-end;
}

/* --- Ultra-small phones (≤ 380px) --- */
@media (max-width: 560px) {
}

/* ============================================================
   📄 Main Content (with mesh background)
============================================================ */
.app-content {
    display: flex;
    justify-content: center;
    flex: 1;
    padding: 0 1.5rem;

    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Mesh drift animation (disabled by default)
@keyframes mesh-move {
    0% {
        background-position: 0% 0%, 80% 0%, 100% 90%, 0% 100%;
    }
    100% {
        background-position: 10% 10%, 70% 20%, 90% 80%, 10% 90%;
    }
}
*/

.app-content > *:first-child {
    width: 100%;
}

.app-content h2.module-title {
    margin-bottom: 1rem;
}

/* ============================================================
   🗂️ Cards
============================================================ */
.card {
    background-color: var(--colour-card-bg);
    border: 1px solid var(--colour-border);
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--colour-bg-inner-shadow);
    margin: 2rem auto;
    padding: var(--container-padding);
    transition: box-shadow var(--transition-speed) ease-in-out;
}

.card:hover {
    box-shadow: 0 4px 6px var(--colour-bg-inner-shadow);
}

/* ============================================================
   ⬇️ Footer
============================================================ */
.app-footer {
    color: var(--colour-text);

    border-top: 1px solid var(--colour-border);
    box-shadow: 0 -2px 4px var(--colour-bg-inner-shadow);

    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;

    margin-top: auto;
}

/* ============================================================
   🔗 Link Styling
============================================================ */
a {
    color: var(--colour-link);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--colour-link-hover);
    text-decoration: underline;
}

/* ============================================================
   🧰 Utility Classes
============================================================ */
.hidden {
    display: none !important;
}

.fade-out {
    opacity: 0;
    transform: translateY(-5px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.flex-vertical {
    display: flex;
    align-items: center;
}
.separator {
    margin: 1rem auto;
    width: 100%;
    border-top: solid 1px var(--colour-border);
}

/* ============================================================
   🔔 Toast Notifications
============================================================ */
.confirm-toast {
    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) translateY(20px);
    opacity: 0;

    padding: 1rem 2rem;
    font-size: 1.25rem;

    background-color: var(--colour-link);
    color: var(--colour-on-accent);

    border-radius: 8px;
    box-shadow: 0 4px 12px var(--colour-bg-inner-shadow);
    border: 2px solid transparent;

    pointer-events: none;
    cursor: pointer;
    text-align: center;

    font-family: var(--font-family-main);
    z-index: 9999;

    transition:
        opacity var(--transition-speed),
        transform var(--transition-speed);
}

.confirm-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
    pointer-events: auto;
}

.confirm-toast.show:hover {
    background-color: var(--colour-link-hover);
}

.confirm-toast-success {
    background-color: var(--colour-success-bg);
    color: var(--colour-success-text);
    border-color: var(--colour-success-border);
}

.confirm-toast-error {
    background-color: var(--colour-danger-bg);
    color: var(--colour-danger-text);
    border-color: var(--colour-danger-border);
}

/* ============================================================
   🔌 Logout Button
============================================================ */
.btn-logout {
    background: var(--colour-bg);
    color: var(--colour-danger-text);
    border: solid 1px var(--colour-danger-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.btn-logout:hover {
    background: var(--colour-danger-bg);
}

.btn-logout:focus {
    background: var(--colour-danger-bg);
}

/* ============================================================
   ❌ Remove Buttons
============================================================ */
.remove-btn {
    background: var(--colour-bg);
    color: var(--colour-danger-text);
    border: solid 1px var(--colour-danger-border);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-speed);
}
.remove-btn:hover {
    background: var(--colour-danger-bg);
}

/**
 * ------------------------------------------------------------
 * 📁 Collapsible Blocks
 * ------------------------------------------------------------
 */

.collapsible {
    border-radius: 6px;
    background: var(--colour-bg-deep1);

    border: 1px solid var(--colour-border);
    box-shadow: 0 2px 4px var(--colour-card-shadow);

    padding: 0.75rem 1rem;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;

    cursor: pointer;
    transition:
        background var(--transition-speed),
        border-color var(--transition-speed),
        box-shadow var(--transition-speed);
}

.collapsible:hover {
    background: var(--colour-bg-highlight);
    border-color: var(--colour-link);
    box-shadow: 0 3px 6px var(--colour-card-shadow);
}

.collapsible .toggle-arrow {
    font-size: var(--font-size-normal);
}

.collapsible[data-has-action="true"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapsed-content {
    overflow: hidden;
    max-height: 0;
    padding: 0 1rem;
    transition: max-height var(--transition-speed);
    /*background: var(--colour-bg);*/
    border-left: 1px solid var(--colour-border);
    border-right: 1px solid var(--colour-border);
    border-bottom: 1px solid var(--colour-border);
}

.collapsed-content.is-expanded {
    max-height: 4800px; /* enough for most content */
    padding: 1rem;
}

/**
 * ------------------------------------------------------------
 * 🔀 Button Actions
 * ------------------------------------------------------------
 */

a.btn-action {
    text-decoration: none;
    opacity: 0.7;
    transition: opacity var(--transition-speed);
}

a.btn-action:hover {
    opacity: 1;
}

/**
 * ------------------------------------------------------------
 * 🔀 Link Button Actions
 * ------------------------------------------------------------
 */

a.link-btn-action {
    text-decoration: none;
    display: block;
    text-align: center;
    color: var(--colour-on-accent);
}

/* ============================================================
   📱 Responsive Design
   Fullscreen behavior for mobile & small tablets
============================================================ */

/* --- Mobile: full width & height, no centered shell --- */
@media (max-width: 768px) {
    body {
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-main {
        max-width: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
        min-height: 100dvh;
        height: auto;
        overflow-y: visible;
    }

    .app-content {
        padding: 1rem;
    }

    .card {
        width: 100%;

        /* Let content determine height (important!) */
        height: auto;

        margin: 0;
        padding: 1rem;

        border-radius: 8px;
        border: 1px solid var(--colour-border);

        background-color: var(--colour-card-bg);

        box-shadow: none; /* flat mobile feel */

        /* Never center vertically -->
           Forms, lists, text must flow normally */
        justify-content: flex-start;

        /* Restore transitions for mobile usability */
        transition: var(--transition-speed);
    }
}

/* --- Small phones (≤ 560px) --- */
@media (max-width: 560px) {
    #theme-selector {
        max-width: 3.5rem;
    }
}

/* --- Ultra-small phones (≤ 380px) --- */
@media (max-width: 380px) {
    .app-content {
        padding: 0.75rem;
    }

    .app-header,
    .app-footer {
        font-size: 0.85rem;
    }

    .confirm-toast {
        font-size: 1rem;
        padding: 0.8rem 1.2rem;
    }
}