/* =====================================================================
   Telenet / MyCloud theme  — ported from the MyCloud `scss/` folder
   (styles.scss, _colors.scss, _fonts.scss, custom/*).
   Plain CSS layered on top of the Bootstrap that ships with the template.
   Loaded AFTER app.css so it wins over the default template styling.
   ===================================================================== */

/* ---- Fonts (drop the .ttf files into wwwroot/fonts to enable) -------- */
@font-face {
   font-family: 'TelenetAlbraSansRegular';
   src: url('../fonts/Telenet-Albra-Sans-Regular.ttf') format('truetype');
   font-display: swap;
}
@font-face {
   font-family: 'TelenetAlbraSansBold';
   src: url('../fonts/Telenet-Albra-Sans-Bold.ttf') format('truetype');
   font-display: swap;
}

/* ---- Palette (mirrors _colors.scss) ---------------------------------- */
:root {
   /* layout */
   --header-height: 85px;
   /* Above SidePanel (1050/1051), below action-menu/modal-shade (1055/1060). */
   --z-header: 1052;

   /* custom */
   --color-background: #E5E5E5;
   --color-success-message: #D6ECE4;
   --color-success-message-icon: #00875A;
   --color-error-message: #FADED7;
   --color-error-message-icon: #DE350B;
   --color-warning-message: #FFEED6;
   --color-warning-message-icon: #FF9500;
   --color-info-message: #DBE8FB;
   --color-info-message-icon: #2373E6;

   /* status icons (VM/cluster/customer state indicators) */
   --color-status-success: #00875A;
   --color-status-danger: #DE350B;
   --color-status-warning: #FF9500;
   --color-status-info: #2373E6;
   --color-status-accent: #9333ea;
   --color-status-neutral: #71717a;
   --color-status-pending: #ca8a04;
   --color-status-paused: #ea580c;

   /* chart series (MetricChart line colors) */
   --color-chart-series-2: #eab308;
   --color-chart-series-3: #0d9488;
   --color-chart-series-4: #7c3aed;

   /* primary */
   --color-telenet-yellow: #FFC421;
   --color-telenet-yellow-hover: #FFB61B;
   --color-telenet-yellow-shade: #d9a400;  /* darker accent, e.g. selection checkmarks */
   --color-lemon: #FFF7C7;
   --color-white: #FFFFFF;
   --color-dark-brown: #291D18;

   /* accents */
   --color-orange: #F26534;         /* headings + links */
   --color-brown-shade-04: #F7F6F6;
   --color-brown-shade-08: #EEEDED;
   --color-brown-shade-32: #b3aca8;
   --color-brown-shade-64: #766F6B;

   /* chart strokes (MetricChart SVG grid/axis lines) */
   --color-chart-grid: #ececec;
   --color-chart-axis: #d6d5d5;

   /* disabled */
   --color-telenet-yellow-disabled: #FFE7A6;
   --color-dark-brown-disabled: #766F6B;

   /* surfaces — theme-aware so cards/panels/borders invert in dark mode
      (see the [data-bs-theme="dark"] block below for the flipped values) */
   --surface-card: var(--color-white);              /* card / panel background */
   --surface-raised: var(--color-brown-shade-04);   /* subtle raised fill */
   --border-subtle: #dee2e6;                        /* card / table borders */
   --track-muted: #edeef1;                          /* progress-bar / badge track */

   /* sidebar — theme-aware so the nav rail follows light/dark like the rest
      (the yellow active state + avatar stay the same brand accent in both) */
   --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #F4F2F0 100%);
   --sidebar-ink: var(--color-dark-brown);          /* primary text */
   --sidebar-ink-muted: #766F6B;                    /* labels, email, idle links */
   --sidebar-ink-disabled: rgba(41, 29, 24, 0.35);
   --sidebar-border: rgba(41, 29, 24, 0.10);        /* dividers */
   --sidebar-hover: rgba(41, 29, 24, 0.06);         /* neutral row hover */

   /* map Bootstrap's own tokens onto the Telenet palette so stock
      components (.btn-primary, links, focus rings) pick it up */
   --bs-primary: var(--color-telenet-yellow);
   --bs-primary-rgb: 255, 196, 33;
   --bs-link-color: var(--color-orange);
   --bs-link-color-rgb: 242, 101, 52;
   --bs-link-hover-color: #d9512a;
   --bs-body-color: var(--color-dark-brown);
   --bs-body-bg: var(--surface-card); /* nearly every Bootstrap component derives its bg from this; page canvas is painted separately below */
   --bs-body-font-family: 'TelenetAlbraSansRegular', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Base (styles.scss) ---------------------------------------------- */
html {
   background-color: var(--color-background);
}

html, body {
   font-family: 'TelenetAlbraSansRegular', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
   color: var(--color-dark-brown);
   background-color: var(--color-background);
}

body, td, th, input, select, textarea {
   font-size: 10pt;
}

::selection            { background: var(--color-telenet-yellow); }
::-moz-selection       { background: var(--color-telenet-yellow); }

p { margin-bottom: 0; }

h1, h2, h3 { font-weight: bold; clear: left; }
h1 { font-size: 1.6rem; color: var(--color-orange); }
h2 { font-size: 20px; line-height: 33px; margin-bottom: 12px; }
h3 { font-size: 18px; line-height: 18px; margin-top: 0; margin-bottom: 10px; }

a, .btn-link { color: var(--color-orange); }
a:hover      { color: var(--bs-link-hover-color); }

/* ---- Buttons (styles.scss) ------------------------------------------- */
.btn {
   font-size: 10pt;
   padding: 5px 20px 3px 20px;
}
.btn:focus { outline: none; box-shadow: none; }
.btn:hover { color: black; }
.btn:disabled, .btn.disabled { pointer-events: auto; cursor: not-allowed; }

.btn-telenet {
   font-weight: 600;
   background-color: var(--color-telenet-yellow);
   color: black;
   border: 1px solid var(--color-telenet-yellow);
}
.btn-telenet:hover:not([disabled]) {
   background-color: var(--color-telenet-yellow-hover);
   color: black;
}
.btn-telenet:disabled, .btn-telenet.disabled {
   background-color: var(--color-telenet-yellow-disabled);
   border-color: var(--color-telenet-yellow-disabled);
}

.btn-telenet-light {
   font-weight: 600;
   background-color: transparent;
   border: 1px solid rgba(41, 29, 24, 0.64);
   color: var(--color-dark-brown);
}
.btn-telenet-light:hover:not([disabled]) {
   color: var(--color-dark-brown); /* beats the generic `.btn:hover { color: black }`, unreadable in dark mode */
   border-color: var(--color-dark-brown);
   border-width: 2px;
   padding: 4px 19px 2px 19px;
}

/* Re-skin Bootstrap's primary button to the Telenet CTA */
.btn-primary {
   --bs-btn-bg: var(--color-telenet-yellow);
   --bs-btn-border-color: var(--color-telenet-yellow);
   --bs-btn-color: #000;
   --bs-btn-hover-bg: var(--color-telenet-yellow-hover);
   --bs-btn-hover-border-color: var(--color-telenet-yellow-hover);
   --bs-btn-hover-color: #000;
   --bs-btn-active-bg: var(--color-telenet-yellow-hover);
   --bs-btn-active-border-color: var(--color-telenet-yellow-hover);
   --bs-btn-active-color: #000;
   --bs-btn-disabled-bg: var(--color-telenet-yellow-disabled);
   --bs-btn-disabled-border-color: var(--color-telenet-yellow-disabled);
   --bs-btn-disabled-color: #000;
}

/* ---- Inputs (custom/_custom-inputs.scss) ----------------------------- */
input[type='text']:focus,
.form-control:focus,
.form-select:focus {
   border-color: var(--color-telenet-yellow);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
               0 0 0 0.2rem rgba(255, 196, 33, 0.25);
}
.form-control.form-control-sm { height: 30px; font-size: 11pt; }
input[type='text'].form-control.form-control-sm { padding-left: 8px; }
select { padding-left: 5px; }

/* ---- Tables (styles.scss) -------------------------------------------- */
.table thead { background-color: #DEDEDE; }
.table th, .table td { padding: 6px 10px 4px 10px; vertical-align: middle; }
table a, table a:hover, table a:focus, table a:visited { color: var(--color-orange); }

/* ---- Nav tabs (styles.scss) ------------------------------------------ */
.nav.nav-tabs {
   position: relative;
   padding: 0 5px 10px 5px;
   margin-bottom: 0;
   margin-right: 8px;
}
.nav.nav-tabs .nav-item { padding: 0 0 0 16px; cursor: pointer; }
.nav.nav-tabs .nav-item .nav-link {
   color: var(--color-dark-brown);
   background-color: transparent;
   border: 0;
   font-weight: 700;
   font-size: 10pt;
   padding: 5px 0 0.4em 0;
   transition: all 0.4s ease-out;
}
.nav.nav-tabs .nav-item .nav-link.active {
   box-shadow: inset 0 -3px 0 0 var(--color-telenet-yellow);
}

/* ---- Filter card (custom/_grid-filter.scss) -------------------------- */
.filter-card { border: 1px solid #dee2e6; color: var(--color-dark-brown); }
.filter-card .filter-card-header {
   font-weight: 700;
   background-color: #E3E3E3;
   padding: 5px 8px;
}
.filter-card .filter-card-body { padding: 3px; }

/* ---- Modal (styles.scss + custom/_custom-modal.scss) ----------------- */
.modal-content {
   background-color: #F7F6F6;
   color: var(--color-dark-brown);
   border: none;
}
.modal-header, .modal-footer { background-color: #E3E3E3; }
.modal-validation-error { color: red; padding: 0.375rem 0; }

/* ---- Contextual message backgrounds ---------------------------------- */
.alert-success { background-color: var(--color-success-message); color: var(--color-dark-brown); }
.alert-danger  { background-color: var(--color-error-message);   color: var(--color-dark-brown); }
.alert-warning { background-color: var(--color-warning-message); color: var(--color-dark-brown); }
.alert-info    { background-color: var(--color-info-message);    color: var(--color-dark-brown); }

/* ---- Shimmer (custom/_shimmer-animation.scss) ------------------------ */
.animate {
   animation: shimmer 2s infinite;
   background: linear-gradient(to right, #f6f7f8 0%, #FFF8E2 20%, #f6f7f8 40%, #f6f7f8 100%);
   background-size: 1000px 100%;
}
@keyframes shimmer {
   0%   { background-position: -1000px 0; }
   100% { background-position: 1000px 0; }
}

/* ---- Dark mode (Bootstrap `data-bs-theme="dark"`) -------------------- */
/* Flip the two semantic tokens so text/background invert coherently; the
   Telenet yellow/orange accents stay the same in both modes. */
[data-bs-theme="dark"] {
   --color-background: #1b1310;
   --color-dark-brown: #ECE6E3;      /* now the light "ink" */
   --color-brown-shade-64: #A79E99;
   --bs-body-bg: var(--surface-card);
   --bs-body-color: var(--color-dark-brown);

   /* flipped surfaces: raised panels sit ABOVE the page background so their
      light ink stays readable (this is what fixes the washed-out dashboard) */
   --surface-card: #241a15;
   --surface-raised: #2a1f19;
   --border-subtle: #3a2c25;
   --track-muted: #3a2c25;

   /* sidebar keeps the Telenet dark-brown rail in dark mode */
   --sidebar-bg: linear-gradient(180deg, #291D18 0%, #1c130f 100%);
   --sidebar-ink: #FFFFFF;
   --sidebar-ink-muted: rgba(255, 255, 255, 0.60);
   --sidebar-ink-disabled: rgba(215, 215, 215, 0.45);
   --sidebar-border: rgba(255, 255, 255, 0.08);
   --sidebar-hover: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body {
   background-color: var(--color-background);
   color: var(--color-dark-brown);
}

/* .top-row is styled via theme tokens in MainLayout.razor.css (scoped),
   so it flips automatically — no override needed here. */

[data-bs-theme="dark"] .filter-card {
   border-color: #3a2c25;
}

[data-bs-theme="dark"] .filter-card .filter-card-header,
[data-bs-theme="dark"] .table thead {
   background-color: #2a1f19;
   color: var(--color-dark-brown);
}

/* The pastel message backgrounds are light, so the light dark-mode ink would be
   unreadable on them: use deep tinted backgrounds with a coloured edge instead. */
[data-bs-theme="dark"] .alert-success { background-color: #16352a; border-color: #2f7d5f; color: #d6ece4; }
[data-bs-theme="dark"] .alert-danger  { background-color: #4a1d17; border-color: #c4493a; color: #fadad5; }
[data-bs-theme="dark"] .alert-warning { background-color: #47340f; border-color: #c28a1d; color: #ffeed6; }
[data-bs-theme="dark"] .alert-info    { background-color: #17304f; border-color: #3f7bc4; color: #dbe8fb; }

/* A disabled CTA (e.g. "Add role" before a role is chosen) would be a pale yellow blob with faded black text on
   the dark page: show it as an outlined, clearly inactive yellow button instead. */
[data-bs-theme="dark"] .btn-telenet:disabled,
[data-bs-theme="dark"] .btn-telenet.disabled {
   background-color: transparent;
   border: 1px dashed rgba(255, 196, 33, 0.7);
   color: rgba(255, 196, 33, 0.85);
   opacity: 1;
}

[data-bs-theme="dark"] .btn-telenet-light { border-color: rgba(236, 230, 227, 0.64); }
[data-bs-theme="dark"] .btn-telenet-light:hover:not([disabled]) {
   background-color: rgba(236, 230, 227, 0.12);
   border-color: var(--color-dark-brown);
}

[data-bs-theme="dark"] .modal-content { background-color: #241a15; }
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { background-color: #2a1f19; }