/* =========================================================
   CLOUDALIGN - GLOBAL PAGE BACKGROUND
   Use this background on Dashboard, HR, Project,
   Commercial, Reports, Settings and other application pages.
   ========================================================= */

:root {
    --cloudalign-page-bg: #f4f8fc;
    --cloudalign-text: #0b2037;
    --cloudalign-card-bg: rgba(255, 255, 255, 0.96);
    --cloudalign-card-border: rgba(198, 214, 228, 0.78);
}

/* ---------------------------------------------------------
   OPTION 1 — RECOMMENDED
   Apply to the content area beside the sidebar.

   IMPORTANT:
   The image file "cloudalign-page-background.png"
   should be stored in the same folder as this CSS file.
   --------------------------------------------------------- */

.app-main,
.main-content,
.page-content {
    position: relative;
    min-height: 100vh;

    color: var(--cloudalign-text);

    background-color: var(--cloudalign-page-bg);

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("./cloudalign-page-background.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    /* Keeps the background visually stable while page content scrolls */
    background-attachment: fixed;
}

.app-shell.app-main {
    padding: 0;
}

body:has(#accounting.view.active) .app-shell.app-main {
    background-color: var(--cloudalign-page-bg);
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("./cloudalign-page-background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}


/* ---------------------------------------------------------
   PAGE WRAPPER
   Use this inside .app-main for every module/page.
   --------------------------------------------------------- */

.page-shell {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 100vh;

    padding: 28px 30px 40px;

    background: transparent;
}


/* ---------------------------------------------------------
   KEEP TEXT HIGHLY READABLE
   --------------------------------------------------------- */

.page-shell h1,
.page-shell h2,
.page-shell h3,
.page-shell h4,
.page-shell h5,
.page-shell h6 {
    color: #0b2037;
}

.page-shell p,
.page-shell label,
.page-shell .page-subtitle {
    color: #5b7086;
}


/* ---------------------------------------------------------
   CARDS / PANELS
   The background remains visible around the cards,
   while content stays easy to read.
   --------------------------------------------------------- */

.page-card,
.dashboard-card,
.content-card,
.panel-card {
    background: var(--cloudalign-card-bg);

    border:
        1px solid var(--cloudalign-card-border);

    border-radius: 15px;

    box-shadow:
        0 10px 28px rgba(14, 42, 64, 0.055);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* ---------------------------------------------------------
   OPTIONAL: SLIGHTLY STRONGER WHITE SURFACE FOR TABLES
   --------------------------------------------------------- */

.table-card,
.form-card,
.modal-card {
    background: rgba(255, 255, 255, 0.985);
}


/* ---------------------------------------------------------
   OPTION 2 — BODY BACKGROUND
   Use this instead if your sidebar is fixed and you want
   the background applied globally to the entire application.

   Remove/comment the background declarations from
   .app-main/.main-content/.page-content if using this.
   --------------------------------------------------------- */

/*
html,
body {
    min-height: 100%;
}

body {
    margin: 0;

    background-color: var(--cloudalign-page-bg);

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("./cloudalign-page-background.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
*/


/* ---------------------------------------------------------
   OPTIONAL: IF YOU WANT THE DESIGN MORE SUBTLE
   Add class="background-soft" to .app-main
   --------------------------------------------------------- */

.app-main.background-soft,
.main-content.background-soft,
.page-content.background-soft {
    background-image:
        linear-gradient(
            rgba(247, 250, 253, 0.32),
            rgba(247, 250, 253, 0.32)
        ),
        url("./cloudalign-page-background.png");
}


/* ---------------------------------------------------------
   OPTIONAL: IF YOU WANT THE DESIGN MORE VISIBLE
   --------------------------------------------------------- */

.app-main.background-strong,
.main-content.background-strong,
.page-content.background-strong {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.02)
        ),
        url("./cloudalign-page-background.png");
}


/* ---------------------------------------------------------
   LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1600px) {
    .page-shell {
        padding: 30px 34px 44px;
    }
}


/* ---------------------------------------------------------
   TABLET
   Fixed backgrounds can perform poorly on some devices,
   so switch to normal scrolling.
   --------------------------------------------------------- */

@media (max-width: 1100px) {
    .app-main,
    .main-content,
    .page-content {
        background-attachment: scroll;
    }

    .page-shell {
        padding: 22px 20px 32px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {
    .app-main,
    .main-content,
    .page-content {
        background-position: center top;
        background-size: cover;
    }

    .page-shell {
        padding: 16px 12px 26px;
    }
}


/* ---------------------------------------------------------
   PRINT
   --------------------------------------------------------- */

@media print {
    .app-main,
    .main-content,
    .page-content {
        background: #ffffff !important;
    }

    .page-card,
    .dashboard-card,
    .content-card,
    .panel-card {
        box-shadow: none;
        backdrop-filter: none;
    }
}