/* Azam RMS — dark theme overlay.
   Extracted verbatim from the client-approved dark prototype
   (style block #azam-dark-concept). Loaded only when the dark theme
   is active; the light theme is azam-proto.css on its own. */
:root {
        color-scheme: dark;
        --azam-red: #ed1c24;
        --azam-red-dark: #ff5158;
        --azam-red-tint: #3b151d;
        --azam-blue: #1595e6;
        --azam-blue-dark: #4153c8;
        --azam-blue-tint: #0d2d48;
        --navy-950: #050b16;
        --navy-900: #081426;
        --navy-800: #102742;
        --sky-500: #36aee9;
        --sky-300: #7bd3ff;
        --gold-100: #35270f;
        --green-100: #0f3127;
        --red-100: #3a171e;
        --purple-100: #221b3c;
        --teal-100: #102f35;
        --gray-900: #f3f7ff;
        --gray-700: #c7d4e7;
        --gray-500: #8fa4bf;
        --gray-300: #41546e;
        --gray-200: #273b56;
        --gray-100: #07111f;
        --gray-50: #0c1a2d;
        --white: #102138;
        --shadow-card: 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.24);
        --shadow-lift: 0 24px 70px rgba(0,0,0,.42);
      }

      html, body { background: #050b16; }
      body {
        color: var(--gray-900);
        background:
          radial-gradient(circle at 78% -10%, rgba(0,114,188,.17), transparent 34%),
          linear-gradient(180deg, #081321, #050b16 68%);
      }

      /* Dark client login concept: same composition, deeper control-room mood. */
      .login-page { background: #050b16; }
      .login-story {
        color: #f7fbff;
        background-image:
          linear-gradient(90deg, #07101f 0%, rgba(7,16,31,.98) 14%, rgba(7,16,31,.76) 24%, rgba(7,16,31,.34) 36%, rgba(7,16,31,.08) 49%),
          linear-gradient(180deg, rgba(5,11,22,.93) 0%, rgba(5,11,22,.12) 34%, rgba(5,11,22,.25) 100%),
          url("/assets/azam-rms-stb-hero-square-v1.png");
      }
      .login-brand b, .login-message h1 { color: #f7fbff; text-shadow: 0 3px 24px rgba(0,0,0,.35); }
      .login-brand small, .login-message p { color: #d0ddec; }
      .login-message p { text-shadow: 0 1px 2px #000, 0 2px 16px rgba(0,0,0,.92); }
      .login-brand:after { background: #60748c; }
      .login-message:after { color: #f2f6fd; }
      .login-flow {
        border-color: rgba(92,129,167,.42);
        background: rgba(7,18,33,.82);
        box-shadow: 0 18px 46px rgba(0,0,0,.36);
      }
      .login-flow .wow-step { color: #eaf4ff; }
      .login-flow .wow-step span {
        color: #64c8ff;
        border-color: rgba(100,200,255,.58);
        background: rgba(9,48,78,.82);
      }
      .login-flow .wow-step:not(:last-child):after {
        background: transparent;
        border-top: 1.7px solid #ff3038;
        border-right: 1.7px solid #ff3038;
        border-radius: 0;
        filter: drop-shadow(0 0 4px rgba(237,28,36,.28));
      }
      .login-access {
        border-left-color: #1e3450;
        background:
          radial-gradient(circle at 92% 7%, rgba(237,28,36,.16), transparent 24%),
          radial-gradient(circle at 68% 12%, rgba(21,149,230,.12), transparent 30%),
          linear-gradient(155deg, #07111f, #050b16 76%);
      }
      .login-access:before {
        opacity: .55;
        background:
          linear-gradient(145deg, transparent 0 68%, rgba(21,149,230,.07) 68% 71%, transparent 71%),
          linear-gradient(25deg, transparent 0 82%, rgba(65,83,200,.08) 82% 85%, transparent 85%);
      }
      /* Native SVG shard field inspired by the Azam brand element reference. */
      .azam-shard-field {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: visible;
        opacity: .72;
      }
      .login-story .azam-shard-field {
        -webkit-mask-image: linear-gradient(90deg, transparent 0 29%, #000 52% 100%);
        mask-image: linear-gradient(90deg, transparent 0 29%, #000 52% 100%);
      }
      .login-access .azam-shard-field {
        z-index: 1;
        opacity: .48;
        -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 31%, #000 69% 100%);
        mask-image: radial-gradient(ellipse at center, transparent 0 31%, #000 69% 100%);
      }
      .azam-shard-field .shard {
        transform-box: fill-box;
        transform-origin: center;
        animation: azamShardDrift 10s ease-in-out infinite alternate;
        will-change: transform, opacity;
      }
      .azam-shard-field .shard.reverse { animation-name: azamShardDriftReverse; }
      .azam-shard-field .shard.slow { animation-duration: 15s; }
      .azam-shard-field .shard.fast { animation-duration: 7s; }
      .azam-shard-field .shard.faint { opacity: .46; }
      .azam-network-field {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
        opacity: .54;
      }
      .login-story .azam-network-field {
        z-index: 2;
        opacity: .46;
      }
      .login-access .azam-network-field {
        z-index: 0;
        opacity: .62;
      }
      .azam-network-field .net-link {
        fill: none;
        stroke: #2a6c80;
        stroke-width: 1.15;
        stroke-opacity: .19;
        vector-effect: non-scaling-stroke;
      }
      .azam-network-field .net-link.secondary { stroke-opacity: .08; }
      .azam-network-field .net-node {
        fill: #32d4ef;
        animation: azamNodePulse 4.8s ease-in-out infinite;
        transform-box: fill-box;
        transform-origin: center;
      }
      .azam-network-field .net-node.delay { animation-delay: -1.6s; }
      .azam-network-field .net-node.delay-two { animation-delay: -3.1s; }
      .azam-network-field .net-cluster {
        animation: azamNetworkDrift 24s ease-in-out infinite alternate;
        transform-box: fill-box;
        transform-origin: center;
      }
      .azam-network-field .net-cluster.reverse { animation-direction: alternate-reverse; animation-duration: 31s; }
      .azam-network-field .net-cluster.slow { animation-duration: 38s; }
      .azam-network-field .net-particle { opacity: .5; }
      @keyframes azamShardDrift {
        0% { transform: translate3d(-5px, 5px, 0) rotate(-5deg); opacity: .56; }
        52% { opacity: .92; }
        100% { transform: translate3d(9px, -12px, 0) rotate(8deg); opacity: .68; }
      }
      @keyframes azamShardDriftReverse {
        0% { transform: translate3d(8px, -7px, 0) rotate(7deg); opacity: .48; }
        100% { transform: translate3d(-8px, 10px, 0) rotate(-7deg); opacity: .82; }
      }
      @keyframes azamNodePulse {
        0%, 100% { opacity: .36; transform: scale(.78); }
        48% { opacity: .96; transform: scale(1.12); }
      }
      @keyframes azamNetworkDrift {
        from { transform: translate3d(-12px, 8px, 0); }
        to { transform: translate3d(18px, -14px, 0); }
      }
      .login-system {
        color: #c8d7e9;
        border-color: #314863;
        background: rgba(11,27,47,.84);
        box-shadow: 0 12px 30px rgba(0,0,0,.26);
      }
      .login-card {
        color: #edf5ff;
        border-color: #2b405d;
        background: linear-gradient(155deg, rgba(17,36,59,.98), rgba(9,22,39,.98));
        box-shadow: 0 28px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.035);
      }
      .login-card:before {
        height: 4px;
        background: linear-gradient(90deg, #ed1c24 0 42%, #ff535a 54%, #1595e6 74%, #4153c8 100%);
        box-shadow: 0 0 22px rgba(237,28,36,.28);
      }
      .login-card h2 { color: #f7fbff; }
      .login-card > p, .login-options, .login-help { color: #91a6c0; }
      .google-login {
        color: #dce8f6;
        border-color: #3d526d;
        background: rgba(15,32,53,.82);
      }
      .google-login:hover { border-color: #49b8f1; box-shadow: 0 0 0 4px rgba(21,149,230,.14); }
      .login-divider { color: #7e94ae; }
      .login-divider:before, .login-divider:after { background: #2b405b; }
      .login-field > span { color: #c8d6e7; }
      .login-field > div {
        color: #92a8c2;
        border-color: #354b67;
        background: #0a182a;
      }
      .login-field > div:focus-within { border-color: #34aef0; background: #0d1d31; box-shadow: 0 0 0 4px rgba(21,149,230,.14); }
      .login-field input { color: #eef6ff; }
      .login-field button, .login-options button { color: #75cfff; }
      .login-submit {
        background: linear-gradient(110deg, #ed1c24, #c4162b 62%, #273691 100%);
        box-shadow: 0 12px 30px rgba(237,28,36,.22);
      }
      .login-help { border: 1px solid #263c56; background: rgba(8,22,39,.84); }
      .login-access footer { color: #6f849d; }

      /* Dark operations workspace. */
      .main-wrap { background: transparent; }
      .topbar {
        color: #eaf2fd;
        border-top-color: #ed1c24;
        border-bottom-color: #263a54;
        background: rgba(6,16,29,.9);
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
      }
      .crumb b, .user b, .page-header h1, .card-head h2, .stat strong { color: #f4f8ff; }
      .global-search, .input, .textarea {
        color: #c7d4e7;
        border-color: #344b67;
        background: #0a182a;
      }
      .global-search kbd, .icon-button, .button.secondary, .button.danger {
        color: #dce7f5;
        border-color: #344b67;
        background: #102138;
      }
      .button.secondary { color: #79d0ff; }
      .button.primary {
        background: linear-gradient(120deg, #ed1c24, #c6172b 68%, #273691);
        box-shadow: 0 7px 20px rgba(237,28,36,.22);
      }
      .top-create {
        color: #fff;
        border: 1px solid rgba(255,111,117,.42);
        background: linear-gradient(110deg, #ed1c24, #b9162a);
        box-shadow: 0 7px 18px rgba(237,28,36,.2);
      }
      .top-create:hover { background: linear-gradient(110deg, #ff3038, #c8172d); }
      .card, .stat, .lifecycle, .modal, .stb-card {
        color: #dce7f5;
        border-color: #263b56;
        background: linear-gradient(155deg, #102139, #0b192b);
        box-shadow: var(--shadow-card);
      }
      .card-head, .identity-block, .caller, .form-note { border-color: #263b56; }
      .pipe-step, .mini-metrics, .evidence, .previous-note, .attempts,
      .schedule, .change, .total-line, .settle-bar, .checkbox-list,
      .finance-summary > div:first-child, th, tfoot td {
        color: #d7e3f2;
        border-color: #273d58;
        background: #0a182a;
      }
      td, .table-row, .rules > div, .detail-list > div, .exceptions > div,
      .centre-list > div, .report-checks > div, .document-row > div {
        border-color: #273b55;
      }
      td { color: #c2d0e2; }
      .outcomes button, .call-outcomes button, .format-tabs button,
      .document-row > div, .finance-summary > div {
        color: #dce8f6;
        border-color: #2d435e;
        background: #0d1d31;
      }
      .outcomes button.selected, .call-outcomes button.selected,
      .format-tabs button.active, .centre-list > div.selected {
        border-color: #1595e6;
        background: #0d2d48;
      }
      .lane { background: #081525; }
      .lane-head span { color: #cdd9e8; background: #102138; }
      .map-canvas { background: #081c2a; }
      .map-grid {
        background-image: linear-gradient(rgba(21,149,230,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(21,149,230,.13) 1px, transparent 1px);
      }
      .land-shape { border-color: rgba(54,174,233,.22); background: #173129; }
      .map-label { color: #d3e0ee; }
      .map-key, .map-controls button { color: #dce8f6; border-color: #2b415d; background: #102138; }
      .pin { fill: #102138; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
      .chart svg { background: repeating-linear-gradient(to bottom, transparent 0, transparent 45px, #17283d 46px); }
      .chart .line { filter: drop-shadow(0 0 5px rgba(21,149,230,.42)); }
      .overview-hero { box-shadow: 0 18px 45px rgba(0,0,0,.3); }
      .overview-hero:after { opacity: .82; }
      .audit-node { box-shadow: 0 0 0 4px #0b192b; }
      .audit-timeline > div:not(:last-child):before, .approval-chain > i, .lifecycle > i { background: #2b405b; }
      .dropzone { border-color: #3c526e; background: rgba(8,22,38,.45); }
      .modal-back { background: rgba(2,6,13,.82); backdrop-filter: blur(5px); }
      .modal-head button { color: #dce8f6; background: #172a43; }
      .hold-banner, .deadline, .rule-result {
        border-color: #72551f;
        color: #ffd17b;
        background: linear-gradient(90deg, #33270f, #211d13);
      }
      .hold-banner button, .deadline button { color: #ffd17b; }
      .blocked span { color: #ef9c9f; }
      .sidebar { box-shadow: 8px 0 35px rgba(0,0,0,.28); }
      .sidebar nav button.active {
        border-color: rgba(237,28,36,.36);
        background: linear-gradient(90deg, rgba(237,28,36,.25), rgba(0,114,188,.22) 72%, rgba(39,54,145,.28));
        box-shadow: inset 3px 0 0 #ed1c24, 0 0 22px rgba(237,28,36,.08);
      }

      @media (max-width: 1000px) {
        .login-access { background: linear-gradient(180deg, #071321, #050b16); }
        .login-access .azam-shard-field { opacity: .38; }
      }
      @media (prefers-reduced-motion: reduce) {
        .azam-shard-field .shard,
        .azam-network-field .net-node,
        .azam-network-field .net-cluster { animation: none; }
      }

      /* Dark-mode validation states: keep the value and warning readable. */
      .field .input.warn {
        color: #fff7f8;
        background: linear-gradient(180deg, rgba(83, 20, 34, .9), rgba(57, 15, 26, .92));
        border-color: #ff6672;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .04),
          0 0 0 1px rgba(237, 28, 36, .12);
      }
      .field .input.warn > span {
        color: #fff7f8;
        opacity: 1;
        font-weight: 700;
      }
      .field .input.warn > svg {
        color: #ff8b94;
        stroke: currentColor;
        opacity: 1;
      }
      .field .input.warn:focus-within {
        background: linear-gradient(180deg, rgba(98, 21, 39, .96), rgba(64, 15, 29, .96));
        border-color: #ff7b85;
        box-shadow: 0 0 0 4px rgba(237, 28, 36, .17);
      }
      .field .inline-alert {
        min-height: 34px;
        color: #ffdadd;
        background: linear-gradient(90deg, rgba(91, 18, 32, .94), rgba(66, 17, 28, .94));
        border: 1px solid rgba(255, 102, 114, .5);
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.35;
      }
      .field .inline-alert > span {
        flex: 1;
        color: inherit;
      }
      .field .inline-alert > svg {
        flex: 0 0 auto;
        color: #ff7580;
        stroke: currentColor;
      }
      .field .inline-alert > button {
        flex: 0 0 auto;
        color: #ffadb4;
      }
      .field .inline-alert > button:hover {
        color: #ffffff;
      }

      @media (prefers-contrast: more) {
        .field .input.warn {
          color: #ffffff;
          background: #43101f;
          border-width: 2px;
        }
        .field .inline-alert {
          color: #ffffff;
          background: #5b1221;
        }
      }