/* ============================================================
   MIKA COMMON STYLES
   Shared design system for all Studio Mika modules.
   ============================================================ */

   /* Google Sans Flex is loaded by a non-blocking <link> in the page <head>.
      An @import here is render-blocking and serialised behind this file, which
      stalls first paint for seconds when fonts.googleapis.com is unreachable. */

   /* ------------------------------------------------------------
      1. CSS VARIABLES
      ------------------------------------------------------------ */
   :root {
   
       /* Typography */
       --font-family: "Google Sans Flex", system-ui, sans-serif;
       --font-weight-normal: 400;
       --font-weight-semi: 600;
   
       /* Font sizes — 3-tier scale */
       --font-size-body: 0.875rem;   /* normal text, matches shell .nav-text */
       --font-size-small: 0.75rem;   /* captions, table headers */
       --font-size-label: 0.6875rem; /* uppercase nav-section-style labels */
   
       /* Colors — surfaces */
       --bg-page: #f5f5f5;
       --bg-card: #ffffff;
       --bg-table-header: #f3f2f1;
   
       /* Colors — text */
       --color-primary: #323130;
       --color-secondary: #605e5c;
       --color-dark: #121212;
   
       /* Colors — borders */
       --color-border: #e1dfdd;
   
       /* Button colors (retained for backward compat) */
       --btn-disabled-bg-color: #D4D4D8;
   
       /* Border radius */
       --border-radius-sm: 0.25rem;
       --border-radius-md: 0.5rem;
       --border-radius-lg: 0.75rem;
   
   }
   
   /* ------------------------------------------------------------
      2. BODY RESET
      ------------------------------------------------------------ */
   body {
       font-family: var(--font-family);
       font-size: var(--font-size-body);
       color: var(--color-primary);
       background-color: var(--bg-page);
       line-height: 1.5;
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale; 
   }
   
   *, *::before, *::after {
       box-sizing: inherit;
   }
   
   /* ------------------------------------------------------------
      2a. SCROLLBAR (Azure-style, matches shell chrome)
      ------------------------------------------------------------ */
   * {
       scrollbar-width: thin;
       scrollbar-color: #c8c6c4 #f3f2f1;
   }
   
   *::-webkit-scrollbar {
       width: 12px;
       height: 12px;
   }
   
   *::-webkit-scrollbar-track {
       background: #f3f2f1;
   }
   
   *::-webkit-scrollbar-thumb {
       background-color: #c8c6c4;
       border-radius: 6px;
       border: 3px solid #f3f2f1;
   }
   
   *::-webkit-scrollbar-thumb:hover {
       background-color: #a19f9d;
   }
   
   *::-webkit-scrollbar-thumb:active {
       background-color: #8a8886;
   }
   
   /* ------------------------------------------------------------
      6. BUTTONS
      ------------------------------------------------------------ */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.375rem;
       font-family: var(--font-family);
       font-size: var(--font-size-body);
       font-weight: var(--font-weight-semi);
       border-radius: var(--border-radius-sm);
       border: 1px solid transparent;
       cursor: pointer;
       height: 2.25rem;
       padding: 0 1.5rem;
       text-decoration: none;
       transition: background 0.15s, color 0.15s, border-color 0.15s;
       white-space: nowrap;
   }
   
   .btn-primary {
       background: var(--color-dark);
       color: #fff;
       border-color: var(--color-dark);
   }
   
   .btn-primary:hover {
       background: #2a2a2a;
       border-color: #2a2a2a;
   }
   
   .btn-secondary {
       background: var(--bg-card);
       color: var(--color-dark);
       border-color: var(--color-border);
   }
   
   .btn-secondary:hover {
       background: var(--color-dark);
       color: #fff;
       border-color: var(--color-dark);
   }
   
   /* Compact button (e.g. table row actions) */
   .btn-narrow {
       height: 2rem;
       padding: 0 1rem;
       font-size: var(--font-size-small);
   }
   
   /* Disabled state */
   .btn:disabled {
       background: var(--btn-disabled-bg-color);
       color: #888;
       border-color: var(--btn-disabled-bg-color);
       cursor: not-allowed;
       opacity: 0.7;
       pointer-events: none;
   }
   
   /* ------------------------------------------------------------
      8. DATA TABLE
      ------------------------------------------------------------ */
   .table-wrapper {
       overflow: auto;
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius-md);
       background: var(--bg-card);
   }
   
   .data-table {
       width: 100%;
       border-collapse: collapse;
       table-layout: fixed;
   }
   
   .data-table thead {
       position: sticky;
       top: 0;
       background: var(--bg-table-header);
       border-bottom: 1px solid var(--color-border);
       z-index: 1;
   }
   
   .data-table thead th {
       padding: 0.5rem 0.75rem;
       font-size: var(--font-size-small);
       font-weight: var(--font-weight-semi);
       text-transform: uppercase;
       letter-spacing: 0.03em;
       color: var(--color-primary);
       text-align: left;
       /* Headers wrap by default — prevents overlap when columns are narrow */
       white-space: normal;
       word-wrap: break-word;
       overflow-wrap: break-word;
       overflow: hidden;
       vertical-align: bottom;
   }
   
   .data-table tbody td {
       padding: 0.5rem 0.75rem;
       font-size: var(--font-size-body);
       border-bottom: 1px solid var(--color-border);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   .data-table tbody tr:last-child td {
       border-bottom: none;
   }
   
   .data-table tbody tr:hover {
       background: #fafafa;
   }
   
   /* Table layout variants */
   .data-table--compact thead th {
       padding: 0.375rem 0.625rem;
   }
   
   .data-table--compact tbody td {
       padding: 0.375rem 0.625rem;
   }
   
   /* Status pill badges */
   .status-tag {
       display: inline-block;
       min-width: 5.5rem;
       text-align: center;
       padding: 0.1875rem 0.5rem;
       border-radius: 0.375rem;
       font-size: var(--font-size-small);
       font-weight: var(--font-weight-semi);
       line-height: 1.4;
   }
   
   .status-tag--error {
       background: #fde7e9;
       color: #c43434;
   }
   
   .status-tag--warning {
       background: #fff4ce;
       color: #8a6d00;
   }
   
   /* ------------------------------------------------------------
      9. CONTENT WRAPPER — Page layout container
      ------------------------------------------------------------ */
   .content-wrapper {
       padding: 2rem 1.5rem;
       max-width: 120rem;
   }
   
   /* Footer */
   .footer {
       position: fixed;
       bottom: 1.25rem;
       right: 1.5rem;
       font-size: var(--font-size-small);
       color: var(--color-secondary);
       z-index: 1;
     }
   
   /* ------------------------------------------------------------
      10. KEYFRAMES & ANIMATION UTILITIES
      ------------------------------------------------------------ */
   
   @keyframes fadeIn {
       from { opacity: 0; }
       to   { opacity: 1; }
   }
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(0.75rem);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-0.75rem);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }