/* ============================================================================
 * ASGA Service Desk — GLPI 11 branding
 * Implements: Claude Design project "Service Portal.dc.html"
 *
 * Served at /asga/asga.css. Linked from the ONE line added to
 * branding/templates/layout/parts/head.html.twig, deliberately after
 * GLPI's own {{ custom_css() }} so this file wins.
 *
 * Approach, straight from the design doc: "same blocks, same fields, same
 * class hooks" — so nearly everything here is a restyle keyed on GLPI's real
 * Tabler classes, not new markup. The single structural override is the login
 * split-panel (pages/login.html.twig), which CSS alone cannot produce.
 *
 * Fonts are SELF-HOSTED (see fonts/). The design doc pulls IBM Plex from
 * Google Fonts, which is a canvas-preview convenience — a corporate service
 * desk should not phone out to Google on every page load, and this one has to
 * work when the office link is down. Both families already ship in this repo
 * for the Flutter app (app/assets/fonts).
 * ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
/* NOTE: unsubsetted TTF (~1.6 MB total, cached after first load). Running
 * pyftsubset over these would cut it to well under 100 KB — worth doing, but
 * it needs fonttools in the build, so it is deliberately left as follow-up. */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* The asgatech wordmark. Variable font — one file covers every weight. */
@font-face {
  font-family: 'Baloo 2';
  src: url('fonts/Baloo2-VF.ttf') format('truetype-variations');
  font-weight: 400 800;
  font-display: swap;
}

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

:root {
  /* Brand blue. The design's headline decision: this replaces Tabler's
   * --tblr-primary, and everything else stays neutral. */
  --asga-blue: #4477bc;
  --asga-blue-dark: #34598f;
  --asga-blue-deep: #2c4e80;
  --asga-blue-tint: #e7eef8;
  --asga-blue-tint-2: #edf3fa;

  /* Ink */
  --asga-ink: #1f2328; /* headings */
  --asga-body: #3f4550; /* body copy */
  --asga-muted: #6b7280;
  --asga-soft: #8a9099;
  --asga-faint: #a9afb7;

  /* Lines & surfaces */
  --asga-line: #e3e6ea;
  --asga-line-strong: #d6dae0;
  --asga-line-soft: #eff1f3;
  --asga-surface: #fafbfc;
  --asga-surface-2: #f6f7f9;
  --asga-surface-3: #e9ebee;

  /* Status */
  --asga-green: #2e9367;
  --asga-green-bg: #eaf6ef;
  --asga-amber: #b67e12;
  --asga-amber-bg: #fdf7ec;
  --asga-red: #d64545;

  --asga-radius: 10px;
  --asga-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI',
    sans-serif;
}

/* Hand the palette to Tabler. This block alone recolours buttons, links,
 * active nav, focus rings, checkboxes and badges across every GLPI screen —
 * it is why screens 02-11 pick up the brand without individual overrides. */
:root,
:root[data-glpi-theme] {
  --tblr-primary: var(--asga-blue);
  --tblr-primary-rgb: 68, 119, 188;
  --tblr-primary-fg: #fff;
  --tblr-primary-darken: var(--asga-blue-dark);
  --tblr-primary-lt: var(--asga-blue-tint);
  --tblr-primary-lt-rgb: 231, 238, 248;
  --tblr-primary-bg-subtle: var(--asga-blue-tint-2);
  --tblr-primary-border-subtle: #c7d9ef;
  --tblr-primary-text-emphasis: var(--asga-blue-dark);

  --tblr-link-color: var(--asga-blue);
  --tblr-link-hover-color: var(--asga-blue-dark);

  --tblr-font-sans-serif: var(--asga-font);
  --tblr-body-color: var(--asga-body);
  --tblr-border-color: var(--asga-line);
}

/* Western digits everywhere, per AGENTS.md ("RTL Arabic with Western
 * digits") — GLPI's Arabic locale would otherwise render Eastern Arabic
 * numerals in ticket ids and dates, which is not what the finance app does. */
body,
[dir='rtl'] body {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'ss01' 0;
}

/* ------------------------------------------------------------ typography -- */

body {
  font-family: var(--asga-font);
  color: var(--asga-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.page-title {
  color: var(--asga-ink);
  letter-spacing: -0.015em;
  font-weight: 600;
}

a {
  color: var(--asga-blue);
  text-decoration: none;
}
a:hover {
  color: var(--asga-blue-dark);
  text-decoration: underline;
}

.text-muted {
  color: var(--asga-muted) !important;
}

/* ---------------------------------------------------- the asgatech mark -- */
/* GLPI paints its own logo into an empty <span class="glpi-logo">. The design
 * calls for that to become the asgatech wordmark, so the background image is
 * dropped and the span is refilled with type.
 *
 * Rendered as TEXT, not the source PNG: the wordmark is plain Baloo 2 (the
 * same construction as app/lib/core/widgets/asga_logo.dart, which draws the
 * sibling "asgapr" mark), so type is crisp at every size and costs ~0 bytes
 * over a 4735px raster. Swap in a real SVG here if brand ever supplies one. */

/* GLPI paints the mark two different ways and BOTH have to be undone:
 *   .page .glpi-logo            → background: var(--glpi-logo)
 *   .page-anonymous .glpi-logo  → content: var(--glpi-logo-dark-login)
 * The second one matters most: `content:` with an image on a real element
 * makes it a REPLACED element, and replaced elements generate no ::before /
 * ::after at all — so resetting content to `normal` is what lets the wordmark
 * below exist. Selectors are kept at the same specificity as GLPI's own
 * (0,2,0); asga.css loads later, so equal specificity wins. */

.page .glpi-logo,
.page-anonymous .glpi-logo,
.navbar-brand .glpi-logo {
  content: normal;
  background: none;
  display: inline-flex;
  align-items: baseline;
  width: auto;
  height: auto;
  font-family: 'Baloo 2', var(--asga-font);
  font-variation-settings: 'wght' 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-indent: 0;
  white-space: nowrap;
  font-size: 30px;
}

/* The anonymous pages give the mark a lot more room than the navbar does. */
.page-anonymous .glpi-logo {
  font-size: 44px;
}

.page .glpi-logo::before,
.page-anonymous .glpi-logo::before,
.navbar-brand .glpi-logo::before {
  content: 'asga';
  color: var(--asga-blue);
}
.page .glpi-logo::after,
.page-anonymous .glpi-logo::after,
.navbar-brand .glpi-logo::after {
  content: 'tech';
  color: #868686;
}

/* Collapsed sidebar: only ~40px of room, so drop the "tech" half. */
body.navbar-collapsed .navbar-brand .glpi-logo {
  font-size: 22px;
}
body.navbar-collapsed .navbar-brand .glpi-logo::after {
  content: none;
}

/* --------------------------------------------------------------- shapes -- */

.card {
  border: 1px solid var(--asga-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04);
}

.btn {
  border-radius: var(--asga-radius);
  font-weight: 500;
}

.btn-primary {
  background-color: var(--asga-blue);
  border-color: var(--asga-blue);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--asga-blue-dark);
  border-color: var(--asga-blue-dark);
}

.form-control,
.form-select {
  border-radius: var(--asga-radius);
  border-color: var(--asga-line-strong);
  background-color: var(--asga-surface);
  color: var(--asga-ink);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--asga-blue);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(68, 119, 188, 0.13);
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--asga-body);
}

/* Status colours, mapped onto Tabler's semantic classes so GLPI's own
 * ticket-status badges pick them up (design screens 05-08). */
.badge.bg-green,
.badge.bg-success {
  background-color: var(--asga-green-bg) !important;
  color: var(--asga-green) !important;
}
.badge.bg-yellow,
.badge.bg-orange,
.badge.bg-warning {
  background-color: var(--asga-amber-bg) !important;
  color: var(--asga-amber) !important;
}

/* ======================================================================== *
 * SCREEN 01 — Sign in
 * pages/login.html.twig · layout/page_card_notlogged.html.twig
 *
 * Scoped with :has() on the marker div that our login.html.twig override
 * emits, so the other anonymous pages that share page_card_notlogged
 * (lost password, FAQ) keep the stock centred-card layout untouched.
 * ======================================================================== */

body:has(.asga-login) {
  background: #fff;
}

/* Stock layout centres a narrow card with the logo above it. The design is a
 * full-bleed split panel, so the wrapper chrome is unwound here. */
body:has(.asga-login) .page-anonymous > .flex-fill {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
}
body:has(.asga-login) .container-tight {
  max-width: none !important;
  width: 100%;
  padding: 0 !important;
}
body:has(.asga-login) .container-tight > .text-center {
  display: none; /* the stock logo — the hero panel carries the mark instead */
}
body:has(.asga-login) .main-content-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
  background: transparent;
}
body:has(.asga-login) .main-content-card > .card-header {
  display: none; /* empty on login; :empty is unreliable once we restyle */
}
body:has(.asga-login) .main-content-card > .card-body {
  padding: 0;
}

.asga-login {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  min-height: 100vh;
}

/* ---- left: brand panel ---- */

.asga-login__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    var(--asga-blue-deep) 0%,
    var(--asga-blue-dark) 42%,
    var(--asga-blue) 100%
  );
  padding: 62px 66px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

/* The three decorative shapes from the design: one soft glow bleeding off the
 * top-right, two hairline rings bleeding off the bottom-left. */
.asga-login__glow,
.asga-login__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.asga-login__glow {
  top: -170px;
  right: -190px;
  width: 560px;
  height: 560px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0) 68%
  );
}
.asga-login__ring--1 {
  bottom: -230px;
  left: -160px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.asga-login__ring--2 {
  bottom: -300px;
  left: -230px;
  width: 760px;
  height: 760px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.asga-login__mark {
  position: relative;
  font-family: 'Baloo 2', var(--asga-font);
  font-variation-settings: 'wght' 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  align-self: flex-start;
}

.asga-login__pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 500px;
}
.asga-login__rule {
  width: 48px;
  height: 3px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px;
}
.asga-login__headline {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.asga-login__sub {
  font-size: 17px;
  line-height: 1.75;
  color: #bdd0e9;
  max-width: 440px;
  text-wrap: pretty;
}

/* ---- right: the form ---- */

.asga-login__form {
  padding: 62px 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.asga-login__title {
  font-size: 30px;
  font-weight: 600;
  color: var(--asga-ink);
  letter-spacing: -0.02em;
}

/* GLPI's own fields, restyled in place — the inputs keep their ids, names and
 * .form-control class so login.php and the LDAP source dropdown still work. */
.asga-login .form-control,
.asga-login .form-select,
.asga-login select {
  height: 50px;
  border-radius: var(--asga-radius);
  font-size: 15px;
}
.asga-login .form-label {
  margin-bottom: 8px;
}
.asga-login .btn-primary {
  height: 52px;
  border-radius: var(--asga-radius);
  font-size: 15.5px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(68, 119, 188, 0.3);
}
.asga-login .form-check-input:checked {
  background-color: var(--asga-blue);
  border-color: var(--asga-blue);
}

/* remember-me ←→ forgotten-password */
.asga-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 18px;
  font-size: 14px;
}
.asga-login__row .form-check-label {
  color: var(--asga-body);
}
.asga-login__row a {
  font-weight: 500;
}

/* The design's aside (FAQ button + "Can't sign in? ext. 4040") was dropped at
 * ASGA's request, so the legal line now carries the rule that used to sit
 * above the aside — otherwise the panel just trails off under the button. */
.asga-login__legal {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--asga-line-soft);
  font-size: 12.5px;
  color: #b6bcc4;
}

/* The stock footer carries GLPI's copyright line; the design replaces it with
 * the asgatech legal line above, which our template override emits. */
body:has(.asga-login) .page-anonymous .text-center.text-muted {
  display: none;
}

/* ---- narrow screens: hero collapses, form stays usable ---- */
@media (max-width: 992px) {
  .asga-login {
    grid-template-columns: 1fr;
  }
  .asga-login__hero {
    display: none;
  }
  .asga-login__form {
    padding: 40px 24px;
    min-height: 100vh;
  }
}