/* Sirb Admin design tokens and global theme foundations.
   Keep this file limited to variables, global canvas, typography primitives, and animations. */

/* Sirb Admin modern UI layer.
   Loaded last to refresh the full product without changing AngularJS behavior. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

:root {
  --brand: #12b700;
  --brand-dark: #078a00;
  --brand-strong: #00a800;
  --brand-soft: #e9fbea;
  --ink: #102018;
  --muted: #66746d;
  --muted-strong: #46554d;
  --line: #e1ebe4;
  --surface: rgba(255,255,255,.92);
  --surface-solid: #ffffff;
  --canvas: #f3f8f5;
  --sidebar: #ffffff;
  --shadow: 0 18px 48px rgba(22,50,31,.08);
  --shadow-soft: 0 10px 30px rgba(22,50,31,.06);
  --radius: 24px;
  --radius-sm: 16px;
  --control-h: 48px;
}

.dark-theme {
  --ink: #e9f0ea;
  --muted: #89958d;
  --line: #29352d;
  --surface: #17221b;
  --canvas: #101712;
  --shadow: 0 12px 30px rgba(0,0,0,.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 12% 8%, rgba(18,183,0,.09), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(6,138,0,.055), transparent 26%),
    linear-gradient(180deg, #f8fbf9 0%, var(--canvas) 42%, #edf7ef 100%);
}

html.dark-theme {
  background:
    radial-gradient(circle at 12% 8%, rgba(18,183,0,.13), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(18,183,0,.08), transparent 26%),
    linear-gradient(180deg, #0b130e 0%, #0e1812 48%, #09110c 100%);
}

body {
  margin: 0;
  min-height: 100%;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(18,183,0,.09), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(6,138,0,.055), transparent 26%),
    linear-gradient(180deg, #f8fbf9 0%, var(--canvas) 42%, #edf7ef 100%);
  font-family: Cairo, Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[ng-cloak] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .44;
  background-image:
    linear-gradient(rgba(8,75,25,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,75,25,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(#000, transparent 78%);
  pointer-events: none;
}

html.dark-theme body,
.dark-theme body,
body.dark-theme {
  background:
    radial-gradient(circle at 12% 8%, rgba(18,183,0,.13), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(18,183,0,.08), transparent 26%),
    linear-gradient(180deg, #0b130e 0%, #0e1812 48%, #09110c 100%);
}

@media (max-width: 640px) {
  :root {
      --control-h: 46px;
    }

}

/* Sirb Admin UI/UX Revamp Foundation v1
   Purpose: one calm visual language for app shell, data surfaces, controls, and dialogs. */
:root {
  --sirb-brand: #16a30b;
  --sirb-brand-hover: #118306;
  --sirb-brand-active: #0f7108;
  --sirb-brand-soft: #e8f8e7;
  --sirb-accent: #6ee16a;
  --sirb-bg: #f5faf6;
  --sirb-bg-elevated: #ffffff;
  --sirb-surface: rgba(255, 255, 255, .88);
  --sirb-surface-solid: #ffffff;
  --sirb-surface-muted: #f0f7f1;
  --sirb-border: #dce9df;
  --sirb-border-strong: #c9ddd0;
  --sirb-text: #122018;
  --sirb-text-soft: #425248;
  --sirb-muted: #728076;
  --sirb-muted-2: #91a096;
  --sirb-danger: #d64a45;
  --sirb-warning: #c98213;
  --sirb-success: #139307;
  --sirb-radius-xs: 12px;
  --sirb-radius-sm: 16px;
  --sirb-radius-md: 20px;
  --sirb-radius-lg: 26px;
  --sirb-radius-xl: 32px;
  --sirb-shadow-sm: 0 10px 24px rgba(18, 43, 25, .055);
  --sirb-shadow-md: 0 20px 54px rgba(18, 43, 25, .09);
  --sirb-shadow-lg: 0 34px 90px rgba(8, 22, 13, .18);
  --sirb-focus: 0 0 0 4px rgba(22, 163, 11, .105);
  --sirb-control-height: 50px;
  --sirb-page-gap: 22px;
  --sirb-container-pad: 24px;

  --brand: var(--sirb-brand);
  --brand-dark: var(--sirb-brand-hover);
  --brand-soft: var(--sirb-brand-soft);
  --ink: var(--sirb-text);
  --muted: var(--sirb-muted);
  --muted-strong: var(--sirb-text-soft);
  --line: var(--sirb-border);
  --surface: var(--sirb-surface);
  --surface-solid: var(--sirb-surface-solid);
  --canvas: var(--sirb-bg);
  --shadow: var(--sirb-shadow-md);
  --shadow-soft: var(--sirb-shadow-sm);
  --radius: var(--sirb-radius-lg);
}

:root {
  --sirb-brand: #19b000;
  --sirb-brand-hover: #128a05;
  --sirb-brand-active: #0f7604;
  --sirb-brand-soft: rgba(25, 176, 0, .105);
}

:root {
  --sirb-bg: #f7faf7;
  --sirb-bg-elevated: #ffffff;
  --sirb-surface: rgba(255, 255, 255, .92);
  --sirb-surface-muted: #f4f8f5;
  --sirb-border: #d9e6dd;
  --sirb-border-strong: #c8d9cf;
  --sirb-brand-soft: #eaf8e8;
}

:root {
  --sirb-brand-solid: #12b700;
  --sirb-brand-solid-hover: #0ea000;
  --sirb-brand-solid-active: #0b8800;
  --sirb-control-bg: color-mix(in srgb, var(--sirb-surface-solid) 88%, var(--sirb-surface-muted));
  --sirb-row-hover: color-mix(in srgb, var(--sirb-brand-soft) 46%, transparent);
}