/* ==========================================================================
   SMM PANEL DESIGN SYSTEM & TOKENS
   Faithfully matching https://panel.superrental.xyz/
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Exact Reference Brand Colors */
  --theme-color1: #01487f;
  --theme-color1-dark: #003660;
  --theme-color1-light: #0d5c9c;
  --theme-color1-80: #01487fcc;
  --theme-color1-10: rgba(1, 72, 127, 0.08);
  --primary: #01487f;
  --primary-color: #01487f;

  /* Accent & Highlight Colors from Reference */
  --accent-green: #5ee78d;
  --accent-green-hover: #4cd47b;
  --utheme-color1: #4cae4c;
  --accent-green-light: rgba(94, 231, 141, 0.15);
  --accent-blue: #2272d6;
  --accent-purple: #7952b3;

  /* Reference Neutrals & Surfaces */
  --bg-page: #f4f7fa;
  --bg-page-alt: #edf2f9;
  --bg-card: #ffffff;
  --bg-sidebar: #01487f;
  --bg-sidebar-hover: #003863;
  --bg-sidebar-active: #002d50;
  --bg-guest-hero: #01487f;
  --bg-table-header: #01487f;
  --bg-table-hover: #f1f5f9;
  --bg-input: #ffffff;
  --bg-input-disabled: #e9ecef;

  /* Borders & Dividers */
  --border-color: #d5dcec;
  --border-color-light: #e6ebf5;
  --border-color-dark: #b8c4da;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-xl: 16px;
  --border-radius-pill: 50px;

  /* Text Colors from Reference */
  --font-color: #052a36;
  --font-color-muted: #6c757d;
  --font-color-light: #8a96a6;
  --font-color2: #e9ebee;
  --font-color-white: #ffffff;

  /* Status Colors */
  --status-completed: #4cae4c;
  --status-completed-bg: #eafaf1;
  --status-processing: #01487f;
  --status-processing-bg: #e6f0fa;
  --status-inprogress: #17a2b8;
  --status-inprogress-bg: #e3f7fc;
  --status-pending: #f39c12;
  --status-pending-bg: #fef7ec;
  --status-partial: #ffc107;
  --status-partial-bg: #fffbf0;
  --status-canceled: #e74c3c;
  --status-canceled-bg: #fdeeee;

  /* Layout Measurements */
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 70px;
  --navbar-height: 64px;
  --container-max-width: 1400px;

  /* Typography */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.8125rem;   /* 13px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px 0 rgba(1, 72, 127, 0.12);
  --shadow-card: 0 2px 10px 0 rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Currency */
  --currency-symbol: '$';
}

/* ==========================================================================
   CSS RESET & BASE DEFAULTS
   ========================================================================== */

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

html {
  font-size: 16px;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--font-color);
  background-color: var(--bg-page);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--theme-color1);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--theme-color1-light);
}

img, svg {
  vertical-align: middle;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #f1f3f6;
}

::-webkit-scrollbar-thumb {
  background: #c2cbd8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9aa7bc;
}