/* Universal Selector */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family), sans-serif;
}

/*============================== Design System ==============================*/
  :root {
    /* ================= SPACING ================= */
      --space-0: 0;
      --space-1: 0.07rem;
      --space-2: 0.14rem;
      --space-3: 0.21rem;
      --space-base: calc( var(--space-2) * 2);

      /* Usage */
      --spacing-none: var(--space-0);
      --spacing-xs: var(--space-base); /*4*/
      --spacing-sm: calc( var(--space-base) * 2); /*8*/
      --spacing-md: calc( var(--space-base) * 3); /*12*/
      --spacing-lg: calc( var(--space-base) * 4); /*16*/
      --spacing-xl: calc( var(--space-base) * 5); /*20*/
      --spacing-2xl: calc( var(--space-base) * 6); /*24*/
      --spacing-3xl: calc( var(--space-base) * 7); /*28*/
      --spacing-4xl: calc( var(--space-base) * 10); /*40*/
      --spacing-5xl: calc( var(--space-base) * 20); /*80*/
      --spacing-6xl: calc( var(--space-base) * 30); /*120*/
      --border-sm: var(--space-1);
      --border-md: var(--space-2);
      --border-lg: var(--space-base);
      --border-default: var(--border-sm) solid var(--color-border-default);

    /* ================= TYPOGRAPHY ================= */
      --font-family: "Inter";
      --font-weight-bold: 700;
      --font-weight-semibold: 600;
      --font-weight-medium: 500;
      --font-weight-regular: 400;

    /* ================= COLORS ================= */
      --color-base-white: #FFFFFF;
      --color-base-black: #000000;

      --color-neutral-50: #FAFAFA;
      --color-neutral-100: #F5F5F5;
      --color-neutral-200: #E5E5E5;
      --color-neutral-300: #D4D4D4;
      --color-neutral-400: #A3A3A3;
      --color-neutral-500: #737373;
      --color-neutral-600: #525252;
      --color-neutral-700: #404040;
      --color-neutral-800: #262626;
      --color-neutral-900: #171717;

      --color-slate-50: #F8FAFC;
      --color-slate-100: #F1F5F9;
      --color-slate-200: #E2E8F0;
      --color-slate-300: #CBD5E1;
      --color-slate-400: #94A3B8;
      --color-slate-500: #64748B;
      --color-slate-600: #475569;
      --color-slate-700: #334155;
      --color-slate-800: #1E293B;
      --color-slate-900: #0F172A;

      --color-red-50: #FEF2F2;
      --color-red-100: #FEE2E2;
      --color-red-200: #FECACA;
      --color-red-300: #FCA5A5;
      --color-red-400: #F87171;
      --color-red-500: #EF4444;
      --color-red-600: #DC2626;
      --color-red-700: #B91C1C;
      --color-red-800: #991B1B;
      --color-red-900: #7F1D1D;

      --color-green-50:  #F0FDF4;
      --color-green-100: #DCFCE7;
      --color-green-200: #BBF7D0;
      --color-green-300: #86EFAC;
      --color-green-400: #4ADE80;
      --color-green-500: #22C55E;
      --color-green-600: #16A34A;
      --color-green-700: #15803D;
      --color-green-800: #166534;
      --color-green-900: #14532D;

      --color-blue-50:  #EFF6FF;
      --color-blue-100: #DBEAFE;
      --color-blue-200: #BFDBFE;
      --color-blue-300: #93C5FD;
      --color-blue-400: #60A5FA;
      --color-blue-500: #3B82F6;
      --color-blue-600: #2563EB;
      --color-blue-700: #1D4ED8;
      --color-blue-800: #1E40AF;
      --color-blue-900: #1E3A8A;

      /* Usage */
      --color-surface-default: var(--color-base-white);
      --color-surface-secondary: var(--color-neutral-50);
      --color-surface-dark: var(--color-neutral-600);
      --color-surface-error: var(--color-red-100);
      --color-surface-success: var(--color-green-100);
      --color-surface-info: var(--color-blue-50);

      --color-status-error: var(--color-red-700);
      --color-status-success: var(--color-green-700);
      --color-status-info: var(--color-blue-700);

      --color-text-default: var(--color-neutral-900);
      --color-text-secondary: var(--color-neutral-700);
      --color-text-dark: var(--color-neutral-100);
      --color-text-error: var(--color-status-error);
      --color-text-success: var(--color-status-success);
      --color-text-info: var(--color-status-info);

      --color-border-default: var(--color-neutral-600);
      --color-border-secondary: var(--color-neutral-200);
      --color-border-dark: var(--color-neutral-50);
      --color-border-error: var(--color-red-600);
      --color-border-success: var(--color-green-600);
      --color-border-info: var(--color-blue-600);

      --shadow-01: inset 0 var(--spacing-xs) var(--spacing-sm) rgba(0,0,0,0.10), inset 0 calc(-1*var(--spacing-xs)) var(--spacing-sm) rgba(0,0,0,0.10);

  }
/**/

/*============================== Typography Scale ==============================*/
  html {
    font-size: clamp(9px, 0.9vw, 14px); /* base */
  }

  /* Display */

    .font-display-large {
      font-size: 2.25rem;
      font-weight: var(--font-weight-bold);
      line-height: 1.25;
    }

    .font-display-medium { /* for topbar */
      font-size: 1.875rem;
      font-weight: var(--font-weight-bold);
      line-height: 1.2;
    }

    .font-display-small { /* for popup */
      font-size: 1.5rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.33;
    }

  /* Title */

    .font-title-large { /* for sidebar-item */
      font-size: 1.125rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.6;
    }

    .font-title-medium {
      font-size: 0.875rem;
      font-weight: var(--font-weight-regular);
      line-height: 1.5;
    }

  /* Label */

    .font-label-medium { /*for button*/
      font-size: 1rem;
      font-weight: var(--font-weight-semibold);
      line-height: 1.5;
    }

    .font-label-small {
      font-size: 0.875rem;
      font-weight: var(--font-weight-semibold);
      line-height: 1.57;
    }

  /* Body */

    .font-body-medium { /*for textbox*/
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.6;
    }

    .font-body-small {
      font-size: 0.75rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
    }

/**/

/*============================== Global Styles ==============================*/

  .dotted-bg {
    display: grid;
    place-items: center; /* centers both vertically and horizontally */
    height: 100%;
    background: var(--color-surface-secondary);
    background-image: radial-gradient(var(--color-neutral-100) var(--space-2), transparent var(--space-1));
    background-size: var(--spacing-lg) var(--spacing-lg); /* distance between dots */
  }

  html, body {
    position: relative;
    height: 100%;
    background-color: var(--color-surface-secondary);
  }

/**/

/*============================== Components ==============================*/

  /* Button */

    .button {
      /*--------------- Color ---------------*/
      
        /* Default */
        --color--surface-default: var(--color-neutral-900);
        --color--text-default: var(--color-text-dark);

        /* Hover */
        --color--surface-hover: var(--color-neutral-800);
        --color--text-hover: var(--color-text-dark);

        /* Active */
        --color--surface-active: var(--color-neutral-800);
        --color--text-active: var(--color-text-dark);

        /* Caution / Error */
        --color--surface-caution: var(--color-status-error);
        --color--text-caution: var(--color-text-dark);

        /* Outline */
        --color--surface-outline: var(--color-surface-default);
        --color--text-outline: var(--color-text-default);
        --color--border-outline: var(--color-border-default);

      /*--------------- Base styles ---------------*/

        background-color: var(--color--surface-default);
        color: var(--color--text-default);
        border: var(--border-sm) solid transparent;
        
        gap: var(--spacing-none);
        padding: var(--spacing-lg) var(--spacing-xl);
        border-radius: var(--spacing-md);
        cursor: pointer;

        /*font-label-medium */
          font-size: 1rem;
          font-weight: var(--font-weight-semibold);
          line-height: 1.5;
        /**/
    }
    .button:hover {
      background-color: var(--color--surface-hover);
      color: var(--color--text-hover);
    }
    .button.caution {
      background-color: var(--color--surface-caution);
      color: var(--color--text-caution);
    }
    .button.outline {
      background-color: var(--color--surface-outline);
      color: var(--color--text-outline);
      border: var(--border-sm) solid var(--color--border-outline);
    }

  /* Textbox */

    .textbox {
      /*--------------- Color ---------------*/

        /* Active */
        --color--border-active: var(--color-border-info);

        /* Border variables */
        --border-default: var(--border-sm) solid var(--color-border-default);
        --border-active: var(--border-md) solid var(--color--border-active);

      /*--------------- Base styles ---------------*/

        background-color: var(--color-surface-default);
        color: var(--color-text-default);
        border: var(--border-default);

        padding: var(--spacing-md) var(--spacing-md);
        border-radius: var(--spacing-xs);
        opacity: 0.6;

        /* font-body-medium */
          font-size: 0.875rem;
          font-weight: var(--font-weight-medium);
          line-height: 1.6;
        /**/
    }
    .textbox:focus {
      border: var(--border-active);
      opacity: 1;
      outline: none;
    }

  /* Card */

    .card {

      background-color: var(--color-surface-default);
      color: var(--color-text-default);
      border: var(--border-sm) solid var(--color-border-secondary);
      
      gap: var(--spacing-xl);
      border-radius: var(--spacing-2xl);
      padding: var(--spacing-4xl) var(--spacing-4xl);
      
      display: flex;
      flex-direction: column;
      width: 36.93rem;
      height: fit-content;

    }
    .card.dashboard {
      width: 100%;
      cursor: pointer;
    }

  /* Alert */

    .alert {
    
      background-color: var(--color-surface-secondary);
      color: var(--color-text-default);
      border: 0;

      padding: var(--spacing-4xl) 0;
      border-radius: var(--spacing-sm);

      display: flex;
      justify-content: center;

      /* font-title-large */
        font-size: 1.125rem;     /* 18px */
        font-weight: var(--font-weight-medium);
        line-height: 1.6;        /* ~29px */
      /**/

    }
    .alert.fail {
      background-color: var(--color-surface-error);
      color: var(--color-text-error);
    }
    .alert.success {
      background-color: var(--color-surface-success);
      color: var(--color-text-success);
    }
   
  /* Topbar */
    .topbar {
      
      background-color: var(--color-surface-default);
      color: var(--color-text-default);
      border: var(--border-sm) solid var(--color-border-secondary);
    
      padding: var(--spacing-4xl);
      padding-top: var(--spacing-5xl);
      margin-left: calc(-1 * var(--space-1));

      display: flex;
      width: 100%;
      height: fit-content;
      transition: width 1s ease;

      /* font-display-medium */
        font-size: 1.875rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.2;
      /**/

    }
  /* Sidebar */

    .sidebar {
      
      background-color: var(--color-surface-default);
      color: var(--color-text-default);
      border: var(--border-sm) solid var(--color-border-secondary);
    
      gap: var(--spacing-4xl);
      padding: var(--spacing-4xl);
      border-radius: var(--spacing-2xl);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 0;
      
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      width: fit-content;
      height: 100%;
      overflow: hidden;
      transition: width 1s ease;

    }
    .sidebar .button {
      width: 18.14rem;
    }
    .sidebar-items {

      background-color: var(--color-surface-default);
      gap: var(--spacing-xl);

      display: flex;
      flex-direction: column;
      justify-content: start;
      height: 100%;
      width: 100%;
      overflow: auto;
      scroll-behavior: smooth;

    }

    .sidebar-item {

      background-color: var(--color-surface-default);
      color: var(--color-text-default);

      padding: var(--spacing-xl) var(--spacing-2xl);
      border-radius: var(--spacing-xl);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      opacity: 0.6;
      cursor: pointer;

      /* font-title-large */
        font-size: 1.125rem;
        font-weight: var(--font-weight-medium);
        line-height: 1.6;
      /**/
        
    }
    .sidebar-item:hover {
      opacity: 1;
    }
    .sidebar-item.active {
      background-color: var(--color-surface-info);
      color: var(--color-text-info);
      border-left: var(--border-lg) solid var(--color-border-info);
      opacity: 1;
    }

  /* Popup */
    .popup {
       background-color: var(--color-surface-default);
      color: var(--color-text-default);
      border: var(--border-sm) solid var(--color-border-secondary);
      
      gap: var(--spacing-xl);
      border-radius: var(--spacing-2xl);
      padding: var(--spacing-4xl) var(--spacing-4xl);
      
      display: flex;
      flex-direction: column;
      width: 36.93rem;
      height: fit-content;

      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
/**/

/*============================== Containers ==============================*/
  
  .viewport-container {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .page-container {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: auto;
  }

  .inside-page-container {
    gap: var(--spacing-3xl);
    margin: var(--spacing-4xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: initial;
  }

  .flex-container {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4xl);
  }
  .flex-container.end {
    justify-content: flex-end;
  }

/**/