/* ============================================================
   Rubix Technology brand theme for the XAF Blazor application.
   Palette (from the Rubix logo):
     Navy    #05253C   (primary)
     Blue    #278FBB
     Light   #71CFEA
     Orange  #EA8125   (call-to-action accent)
   ============================================================ */
:root {
    --rubix-navy: #05253C;
    --rubix-blue: #278FBB;
    --rubix-light: #71CFEA;
    --rubix-orange: #EA8125;
    --rubix-navy-deep: #03192a;
    --rubix-surface: #f4f6f8;
}

html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/* ---- Application header (top bar) -------------------------------------- */
.header.navbar-dark,
.header {
    background-color: var(--rubix-navy) !important;
    background-image: linear-gradient(90deg, var(--rubix-navy-deep) 0%, var(--rubix-navy) 60%) !important;
    border-bottom: 3px solid var(--rubix-orange);
    box-shadow: 0 1px 6px rgba(3, 25, 42, .35);
}

/* Force light foreground on the navy header (theme defaults are dark = unreadable). */
.header.navbar-dark,
.header.navbar-dark a,
.header.navbar-dark [role="heading"],
.header.navbar-dark .dxbl-text,
.header.navbar-dark .view-caption,
.header.navbar-dark .dxbl-btn {
    color: #fff !important;
}
.header.navbar-dark .dxbl-btn {
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-color: #fff;
    --dxbl-btn-icon-color: #fff;
    --dxbl-btn-hover-icon-color: #fff;
}
/* Header icons (hamburger, toolbar actions, account, settings) render as SVG → make them white. */
.header.navbar-dark svg { fill: currentColor; color: #fff; }
.header.navbar-dark .dxbl-btn:hover { background-color: rgba(255, 255, 255, .12); }

/* The pop-out panels launched from the header (account menu, settings/theme switcher,
   dropdowns) are light surfaces — force their text/icons DARK; otherwise they inherit the
   header's white and become unreadable. Uses .header.navbar-dark to beat the white rules. */
.header.navbar-dark .account-main,
.header.navbar-dark .account-main *,
.header.navbar-dark .settings-bar,
.header.navbar-dark .settings-bar *,
.header.navbar-dark .themes-menu,
.header.navbar-dark .themes-menu *,
.header.navbar-dark .dropdown-menu,
.header.navbar-dark .dropdown-menu *,
.header.navbar-dark .dxbl-popup,
.header.navbar-dark .dxbl-popup * {
    color: #1f2937 !important;
}
.header.navbar-dark .account-main svg,
.header.navbar-dark .settings-bar svg,
.header.navbar-dark .dropdown-menu svg,
.header.navbar-dark .dxbl-popup svg { fill: currentColor !important; color: #1f2937 !important; }

/* Logo: full-colour Rubix wordmark. White variant on the dark header,
   navy variant on the light logon card. The .header-logo element is a
   masked box by default in the template; switch it to a real image. */
.header-logo {
    flex-shrink: 0;
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    width: 168px;
    height: 34px;
}

.header.navbar-dark .header-logo {
    background-image: url('../images/rubix-logo-white.png');
}

/* ---- Logon (login) screen --------------------------------------------- */
.logon-template-header.card-header {
    background-color: #fff;
    border-bottom: 3px solid var(--rubix-orange);
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem;
}

.logon-template-header .header-logo {
    background-image: url('../images/rubix-logo.png');
    background-position: center;
    width: 240px;
    height: 56px;
}

.logon-main.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(3, 25, 42, .18);
    overflow: hidden;
}

.logon-template-body {
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(39, 143, 187, .12), transparent 60%),
        var(--rubix-surface);
}

/* ---- Accent colours for primary actions & links ----------------------- */
.dxbl-btn.dxbl-btn-primary,
.btn-primary {
    background-color: var(--rubix-navy) !important;
    border-color: var(--rubix-navy) !important;
}

.dxbl-btn.dxbl-btn-primary:hover,
.btn-primary:hover {
    background-color: var(--rubix-blue) !important;
    border-color: var(--rubix-blue) !important;
}

a {
    color: var(--rubix-blue);
}

/* Active navigation item gets a subtle Rubix accent. */
.xaf-sidebar .dxbl-listbox-item.dxbl-active,
.nav-item.active {
    box-shadow: inset 3px 0 0 0 var(--rubix-orange);
}

/* ---- Dashboard tiles (used by the role landing dashboards) ------------- */
.rubix-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .5rem;
}

/* Theme-adaptive tiles: translucent surface + inherited text colour so they read
   correctly in both the light and dark DevExpress themes. The left accent bar uses
   the fixed brand colours (visible on either background). */
.rubix-kpi {
    flex: 1 1 200px;
    min-width: 180px;
    background: rgba(127, 140, 160, .08);
    border: 1px solid rgba(127, 140, 160, .25);
    border-left: 4px solid var(--rubix-blue);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 14px rgba(3, 25, 42, .06);
}

.rubix-kpi.accent-navy { border-left-color: var(--rubix-blue); }
.rubix-kpi.accent-orange { border-left-color: var(--rubix-orange); }
.rubix-kpi.accent-light { border-left-color: var(--rubix-light); }

.rubix-kpi .kpi-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    margin-bottom: .35rem;
}

.rubix-kpi .kpi-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: inherit;
    line-height: 1.1;
}

.rubix-dashboard-welcome {
    font-size: 1.35rem;
    font-weight: 600;
    color: inherit;
    padding: .25rem .5rem 0;
}

/* ---- Weekly timesheet grid (BigTime-style) ---------------------------- */
.ts-wrap { padding: .5rem .25rem; }

.ts-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.ts-toolbar .ts-spacer { flex: 1 1 auto; }
.ts-week { font-weight: 600; color: var(--rubix-navy); min-width: 12rem; text-align: center; }

.ts-btn {
    border: none;
    border-radius: 8px;
    padding: .45rem .9rem;
    font-weight: 600;
    cursor: pointer;
}
.ts-btn-light { background: #eef2f5; color: var(--rubix-navy); }
.ts-btn-primary { background: var(--rubix-navy); color: #fff; }
.ts-btn-save { background: #eef2f5; color: var(--rubix-navy); }
.ts-btn-submit { background: var(--rubix-orange); color: #fff; }
.ts-btn:hover { filter: brightness(1.05); }

.ts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e3e8ec;
    border-radius: 12px;
    overflow: hidden;
}
.ts-table thead th {
    background: var(--rubix-navy);
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: .55rem .4rem;
    font-size: .85rem;
}
.ts-table thead th span { font-weight: 400; opacity: .8; font-size: .78rem; }
.ts-col-project, .ts-col-cat { text-align: left !important; min-width: 12rem; }
.ts-table tbody td {
    border-top: 1px solid #eef1f4;
    padding: .35rem .4rem;
    vertical-align: middle;
}
.ts-table tbody tr:nth-child(even) td { background: #fafbfc; }
.ts-col-day { text-align: center; width: 5.5rem; }
.ts-col-total, .ts-total { text-align: center; font-weight: 700; color: var(--rubix-navy); }

.ts-cell {
    width: 4.5rem;
    text-align: center;
    border: 1px solid #d8dee3;
    border-radius: 6px;
    padding: .3rem .25rem;
}
.ts-cell:focus { outline: 2px solid var(--rubix-blue); border-color: var(--rubix-blue); }
.ts-select {
    width: 100%;
    border: 1px solid #d8dee3;
    border-radius: 6px;
    padding: .3rem .4rem;
    background: #fff;
}

.ts-table tfoot td {
    background: #f0f3f6;
    font-weight: 700;
    color: var(--rubix-navy);
    text-align: center;
    padding: .55rem .4rem;
    border-top: 2px solid var(--rubix-navy);
}
.ts-table tfoot td:first-child { text-align: left; }

/* Active row + selected day highlight (BigTime-style). */
.ts-table tbody tr.ts-row-active > td { background: #eaf4fa; }
.ts-col-day.ts-cell-active .ts-cell {
    border-color: var(--rubix-blue);
    box-shadow: 0 0 0 2px rgba(39, 143, 187, .25);
}

/* Inline note editor that appears under the active row for the selected day. */
.ts-notes-row td {
    border-top: none !important;
    background: #eaf4fa !important;
    padding: .55rem .75rem !important;
    vertical-align: top;
}
.ts-note-side { text-align: left !important; }
.ts-note-day { font-weight: 600; color: var(--rubix-navy); margin-bottom: .5rem; }
.ts-note-done { padding: .3rem .9rem; }
.ts-note-main { text-align: left !important; }
.ts-note-counter { font-size: .75rem; color: #8a98a5; text-align: right; margin-bottom: .25rem; }
.ts-note-big {
    width: 100%;
    min-height: 5rem;
    border: 1px solid #cfd8df;
    border-radius: 8px;
    padding: .55rem .7rem;
    font-size: .9rem;
    line-height: 1.35;
    resize: vertical;
    background: #fff;
}
.ts-note-big:focus { outline: 2px solid var(--rubix-blue); border-color: var(--rubix-blue); }

.ts-empty, .ts-empty-row { padding: 1rem; color: #6b7884; text-align: center; }
.ts-status { margin-top: .6rem; color: var(--rubix-blue); font-weight: 600; }

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}