/* Elements: buttons, inputs, badges – CSS-first utilities */
@layer elements {
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:.2s ease all;background:var(--color-surface-2);color:var(--color-text)}
  .btn:hover{background:var(--color-surface-3)}
  .btn:disabled,.btn[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}
  .btn-primary{background:var(--color-brand);color:#111;border-color:var(--color-brand)}
  .btn-primary:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark)}
  .btn-secondary{background:var(--color-surface);border-color:var(--color-border)}
  .btn-ghost{background:transparent;color:var(--color-text-muted)}
  .btn-ghost-border{background:transparent;color:var(--color-text);border-color:var(--color-border)}
  .btn-ghost-border:hover{background:var(--color-brand);color:#111;border-color:var(--color-brand)}
  .btn-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}
  .btn-success{background:var(--color-success);color:#fff;border-color:var(--color-success)}
  .btn-warning{background:var(--color-warning);color:#111;border-color:var(--color-warning)}
  .btn-info{background:var(--color-info);color:#fff;border-color:var(--color-info)}
  .btn-purple{background:var(--color-purple);color:#fff;border-color:var(--color-purple)}
  .btn-xs{padding:.125rem .5rem;font-size:var(--text-xs)}
  .btn-sm{padding:.25rem .5rem;font-size:var(--text-sm)}
  .btn-md{padding:.5rem .75rem;font-size:var(--text-base)}
  .btn-lg{padding:.75rem 1rem;font-size:var(--text-lg)}
  .btn-default{background:var(--color-surface-2);color:var(--color-text)}
  .btn-outline-brand{border-color:var(--color-brand)}
  .btn-square{flex:0 0 auto;aspect-ratio:1;padding:var(--space-2)}

  /* ===== CTA BUTTONS - Animated spinning gradient border ===== */
  /* Usage: Add .btn-cta and optionally .btn-cta-{variant} for color */
  /* Variants: brand (default), success, warning, danger, info, purple */
  /* The button shows animated border when idle, solid fill on hover */

  .btn-cta{
    position:relative;
    background:transparent;
    color:var(--color-text);
    border:2px solid transparent;
    overflow:hidden;
    z-index:0;
  }
  /* Spinning gradient border - uses global --cta-angle from :root animation */
  .btn-cta::before{
    content:'';
    position:absolute;
    inset:-100%;
    background:conic-gradient(
      from var(--cta-angle, 0deg),
      var(--cta-color, var(--color-brand)) 0deg,
      var(--cta-color, var(--color-brand)) 90deg,
      transparent 180deg,
      transparent 270deg,
      var(--cta-color, var(--color-brand)) 360deg
    );
    z-index:-2;
    animation:cta-spin 9s linear infinite;
  }
  /* Inner solid fill - covers the spinner, shows through border gap */
  .btn-cta::after{
    content:'';
    position:absolute;
    inset:2px;
    border-radius:inherit;
    background:var(--color-surface);
    z-index:-1;
  }
  /* Hover: solid fill with CTA color */
  .btn-cta:hover{
    color:var(--cta-text, #111);
    background:var(--cta-color, var(--color-brand));
    border-color:var(--cta-color, var(--color-brand));
  }
  .btn-cta:hover::before{display:none}
  .btn-cta:hover::after{display:none}

  /* Active/pressed state */
  .btn-cta:active{transform:scale(0.98)}

  /* When button is "active" (e.g., current tab), show solid state */
  .btn-cta.active{
    color:var(--cta-text, #111);
    background:var(--cta-color, var(--color-brand));
    border-color:var(--cta-color, var(--color-brand));
  }
  .btn-cta.active::before{display:none}
  .btn-cta.active::after{display:none}

  /* Color variants - set --cta-color and --cta-text CSS variables */
  .btn-cta-brand{--cta-color:var(--color-brand);--cta-text:#111}
  .btn-cta-success{--cta-color:var(--color-success);--cta-text:#fff}
  .btn-cta-warning{--cta-color:var(--color-warning);--cta-text:#111}
  .btn-cta-danger{--cta-color:var(--color-danger);--cta-text:#fff}
  .btn-cta-info{--cta-color:var(--color-info);--cta-text:#fff}
  .btn-cta-purple{--cta-color:var(--color-purple);--cta-text:#fff}

  /* Disabled state - no animation, muted appearance */
  .btn-cta:disabled,.btn-cta[disabled]{
    opacity:0.5;
    cursor:not-allowed;
    pointer-events:none;
  }
  .btn-cta:disabled::before,.btn-cta[disabled]::before{
    animation:none;
    background:var(--color-border);
  }

  /* Reduced motion support */
  @media(prefers-reduced-motion:reduce){
    .btn-cta::before{animation:none}
    .btn-cta:active{transform:none}
  }

  /* Button groups - connected buttons */
  .btn-group{display:inline-flex;border-radius:var(--radius-md);overflow:hidden}
  .btn-group .btn{border-radius:0;margin:0}
  .btn-group .btn:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}
  .btn-group .btn:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}
  .btn-group .btn:not(:last-child){border-right:none}
  .btn-group-stretch{display:flex;width:100%}
  .btn-group-stretch .btn{flex:1}

  /* Bool switch - required yes/no selection */
  .bool-switch{display:flex;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border)}
  .bool-switch-option{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all 0.15s ease;background:var(--color-surface);color:var(--color-text-muted);border:none}
  .bool-switch-option:first-child{border-right:1px solid var(--color-border)}
  .bool-switch-option:hover:not(.active){background:var(--color-surface-2)}
  .bool-switch-option.active{color:var(--color-text)}
  .bool-switch-option.active.bool-yes{background:var(--color-success);color:#fff}
  .bool-switch-option.active.bool-no{background:var(--color-surface-3);color:var(--color-text)}
  .bool-switch.bool-switch-required:not(.bool-switch-set){border-color:var(--color-warning)}
  .bool-switch-sm .bool-switch-option{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
  .bool-switch-lg .bool-switch-option{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}

  .input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text)}
  .input:focus{outline:none;border-color:var(--color-brand)}
  .input-xs{padding:.25rem .5rem;font-size:var(--text-xs)}
  .input-sm{padding:.375rem .5rem;font-size:var(--text-sm)}
  .input-md{padding:.5rem .75rem;font-size:var(--text-base)}
  .input-lg{padding:.75rem 1rem;font-size:var(--text-lg)}

  /* Form field groups */
  .form-field{display:flex;flex-direction:column;gap:var(--space-1)}
  .form-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}

  /* Form inputs with theme support */
  .form-input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-base);transition:border-color .15s ease,box-shadow .15s ease}
  .form-input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px var(--color-brand)20}
  .form-input:hover{border-color:var(--color-border-hover)}
  .form-input::placeholder{color:var(--color-text-muted);opacity:.6}

  /* Time and date inputs - enhanced styling */
  input[type="time"].form-input,input[type="date"].form-input,input[type="datetime-local"].form-input{
    font-family:var(--font-mono)!important;
    font-size:var(--text-base)!important;
    font-weight:400!important;
    letter-spacing:0.05em!important;
    padding:var(--space-3) var(--space-4)!important;
    cursor:pointer!important;
    background:var(--color-surface-2)!important;
    color:var(--color-text)!important;
  }

  /* Hide native time/date picker button (we have our own custom button) */
  input[type="time"].form-input::-webkit-calendar-picker-indicator{
    display:none!important;
  }

  /* Hide native date picker button */
  input[type="date"].form-input::-webkit-calendar-picker-indicator,input[type="datetime-local"].form-input::-webkit-calendar-picker-indicator{
    display:none!important;
  }

  /* Firefox - hide native picker button */
  input[type="time"].form-input::-moz-calendar-picker-indicator,input[type="date"].form-input::-moz-calendar-picker-indicator,input[type="datetime-local"].form-input::-moz-calendar-picker-indicator{
    display:none!important;
  }

  /* Time picker popup theming (WebKit/Blink) */
  input[type="time"].form-input::-webkit-datetime-edit{color:var(--color-text);font-family:var(--font-mono);font-weight:400}
  input[type="time"].form-input::-webkit-datetime-edit-fields-wrapper{color:var(--color-text);font-family:var(--font-mono)}
  input[type="time"].form-input::-webkit-datetime-edit-hour-field{color:var(--color-text);font-family:var(--font-mono)}
  input[type="time"].form-input::-webkit-datetime-edit-minute-field{color:var(--color-text);font-family:var(--font-mono)}
  input[type="time"].form-input::-webkit-datetime-edit-ampm-field{color:var(--color-text);font-family:var(--font-mono)}

  /* Date picker popup theming (WebKit/Blink) */
  input[type="date"].form-input::-webkit-datetime-edit{color:var(--color-text)}
  input[type="date"].form-input::-webkit-datetime-edit-fields-wrapper{color:var(--color-text)}
  input[type="date"].form-input::-webkit-datetime-edit-year-field{color:var(--color-text)}
  input[type="date"].form-input::-webkit-datetime-edit-month-field{color:var(--color-text)}
  input[type="date"].form-input::-webkit-datetime-edit-day-field{color:var(--color-text)}

  /* Form select - combines form-input styling with dropdown arrow */
  .form-select{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-base);transition:border-color .15s ease,box-shadow .15s ease;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}
  .form-select:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px var(--color-brand)20;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")}
  .form-select:hover{border-color:var(--color-border-hover)}

  /* Dropdown select styling */
  .dropdown-select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}
  .dropdown-select:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");border-color:var(--color-brand)}

  /* Legacy select styling - use .dropdown-select instead */
  select.input{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}
  select.input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");border-color:var(--color-brand)}

  /* Form controls - dropdowns, selects */
  .form-control{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);cursor:pointer}
  .form-control:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px var(--color-brand)20}
  .form-control:hover{border-color:var(--color-border-hover)}
  .form-control-xs{padding:.25rem .5rem;font-size:var(--text-xs)}
  .form-control-sm{padding:.375rem .5rem;font-size:var(--text-sm)}
  .form-control-md{padding:.5rem .75rem;font-size:var(--text-base)}
  .form-control-lg{padding:.75rem 1rem;font-size:var(--text-lg)}

  /* Select dropdown specific styling */
  select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}
  select.form-control:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")}

  .checkbox-themed{appearance:none;width:1rem;height:1rem;border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;position:relative;transition:.2s ease all}
  .checkbox-themed:checked{background:var(--color-brand);border-color:var(--color-brand)}
  .checkbox-themed:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:.75rem;font-weight:bold}
  .checkbox-themed:indeterminate{background:var(--color-brand);border-color:var(--color-brand)}
  .checkbox-themed:indeterminate::after{content:'─';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:1rem;font-weight:900;line-height:1}
  .checkbox-themed:hover{border-color:var(--color-brand)}
  .checkbox-themed:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px var(--color-brand)20}

  .badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border:1px solid transparent;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600}
  .badge-sm{padding:.125rem .5rem;font-size:var(--text-xs)}
  .badge-md{padding:.375rem .75rem;font-size:var(--text-sm)}
  .badge-success{background:#16a34a20;color:var(--color-success)}
  .badge-warning{background:#f59e0b20;color:var(--color-warning)}
  .badge-danger{background:#ef444420;color:var(--color-danger)}
  .badge-info{background:#3b82f620;color:var(--color-info)}
  .badge-purple{background:#a855f720;color:var(--color-purple)}
  .badge-secondary{background:rgba(159, 180, 191, 0.2);color:var(--color-text-muted)}
  .badge-primary{background:#f59e0b20;color:var(--color-brand)}
  .badge-light{background:rgba(255, 255, 255, 0.9);color:#1f2937;backdrop-filter:blur(4px)}

  /* CTA Badge - Animated spinning gradient border */
  /* Layer 1 (outer): clips the spinning gradient */
  /* Layer 2 (::before): oversized spinning gradient (z-index 1) */
  /* Layer 3 (::after): inner solid fill covering spinner (z-index 2) */
  .badge-cta{
    position:relative;
    background:transparent;
    color:var(--color-text-muted);
    border:2px solid transparent;
    overflow:hidden;
    border-radius:var(--radius-full);
  }
  /* Spinning gradient border - GREEN by default, uses global angle */
  .badge-cta::before{
    content:'';
    position:absolute;
    inset:-100%;
    background:conic-gradient(
      from var(--cta-angle, 0deg),
      var(--color-success) 0deg,
      var(--color-success) 120deg,
      transparent 180deg,
      transparent 300deg,
      var(--color-success) 360deg
    );
    z-index:1;
  }
  /* Inner solid fill - MUST be opaque to fully cover spinner */
  .badge-cta::after{
    content:'';
    position:absolute;
    inset:2px;
    border-radius:var(--radius-full);
    background:var(--color-surface);
    z-index:2;
  }
  /* Content sits on top */
  .badge-cta>*{position:relative;z-index:3}
  .badge-cta>i{margin-right:0.25rem}

  /* Hover: BRAND colored spinner */
  .badge-cta:hover{color:var(--color-brand)}
  .badge-cta:hover::before{
    background:conic-gradient(
      from var(--cta-angle, 0deg),
      var(--color-brand) 0deg,
      var(--color-brand-dark,#d97706) 120deg,
      transparent 180deg,
      transparent 300deg,
      var(--color-brand) 360deg
    );
  }

  /* Active state - solid brand, no animation */
  .badge-cta.active{
    color:#111;
    border-color:var(--color-brand);
    background:var(--color-brand);
  }
  .badge-cta.active::before{display:none}
  .badge-cta.active::after{display:none}

  /* Click/pressed state */
  .badge-cta:active{transform:scale(0.98)}

  /* Spinning gradient animation - uses fixed timing to prevent reset on re-render */
  @keyframes cta-spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
  /* Global animation runner - all cta badges sync to same animation cycle */
  @property --cta-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
  }
  :root{
    animation:cta-global-spin 3s linear infinite;
  }
  @keyframes cta-global-spin{
    from{--cta-angle:0deg}
    to{--cta-angle:360deg}
  }

  /* Reduced motion support */
  @media(prefers-reduced-motion:reduce){
    :root{animation:none}
    .badge-cta:active{transform:none}
  }

  /* Typography helpers */
  .text-3xs{font-size:0.625rem}
  .text-2xs{font-size:0.6875rem}
  .text-xs{font-size:var(--text-xs)}
  .text-sm{font-size:var(--text-sm)}
  .text-base{font-size:var(--text-base)}
  .text-lg{font-size:var(--text-lg)}
  .text-xl{font-size:var(--text-xl)}
  .text-2xl{font-size:var(--text-2xl)}
  .text-3xl{font-size:var(--text-3xl)}
  .text-4xl{font-size:var(--text-4xl)}
  .text-5xl{font-size:3rem}
  .text-6xl{font-size:3.75rem}
  .text-7xl{font-size:4.5rem}
  .text-8xl{font-size:6rem}
  .text-9xl{font-size:8rem}
  .font-light{font-weight:300}
  .font-normal{font-weight:400}
  .font-medium{font-weight:500}
  .font-semibold{font-weight:600}
  .font-bold{font-weight:700}
  .text-muted{color:var(--color-text-muted)}
  .link{color:var(--color-brand);text-decoration:none}
  .link:hover{text-decoration:underline}

  /* Display helpers */
  .hidden{display:none}
  .block{display:block}
  .inline{display:inline}
  .inline-block{display:inline-block}
  .flex{display:flex}
  .grid{display:grid}
  .grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .grid-cols-5{grid-template-columns:repeat(5,1fr)}
  .grid-cols-6{grid-template-columns:repeat(6,1fr)}
  .grid-cols-7{grid-template-columns:repeat(7,1fr)}

  /* 🚨 CRITICAL: Flexbox helpers - Cross-Platform Layout Foundation */
  .row{display:flex;flex-direction:row}
  .flex-wrap{flex-wrap:wrap}
  .flex-nowrap{flex-wrap:nowrap}
  .row-start{justify-content:flex-start}
  .row-end{justify-content:flex-end}
  .row-between{justify-content:space-between}
  .column{display:flex;flex-direction:column}
  .column-stretch{display:flex;flex-direction:column;align-items:stretch}
  .items-center{align-items:center}
  .justify-center{justify-content:center}
  .justify-between{justify-content:space-between}
  
  /* 🔥 ESSENTIAL: .flex-1 - Base flex growth for general elements */
  /* NOTE: For iPad Safari compatibility, scrollable containers need flex:1 1 0 */
  /* This .flex-1{flex:1} works for non-scrollable elements only */
  .flex-1{flex:1}
  .expand{flex:1;min-height:0;min-width:0}

  /* Gap utilities */
  .gap-0{gap:0!important}
  .gap-1{gap:var(--space-1)}
  .gap-2{gap:var(--space-2)}
  .gap-3{gap:var(--space-3)}
  .gap-4{gap:var(--space-4)}
  .gap-6{gap:var(--space-6)}
  .gap-8{gap:var(--space-8)}
  .gap-10{gap:var(--space-10)}
  .gap-12{gap:var(--space-12)}

  /* Spacing utilities (minimal) */
  .mb-2{margin-bottom:var(--space-2)}
  .mb-3{margin-bottom:var(--space-3)}
  .mb-4{margin-bottom:var(--space-4)}
  .mt-3{margin-top:var(--space-3)}
  .p-2{padding:var(--space-2)}
  .p-3{padding:var(--space-3)}
  .p-4{padding:var(--space-4)}
  .px-4{padding-left:var(--space-4);padding-right:var(--space-4)}
  .px-2_5{padding-left:.625rem;padding-right:.625rem}

  /* Grid helpers */
  .grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .grid-cols-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}

  /* Card component */
  .card{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color .15s ease,transform .1s ease}
  .card-header{padding:var(--space-3) var(--space-4)}
  .card-header.bg-success{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}
  .card-body{padding:var(--space-4)}
  .card-footer{padding:var(--space-3) var(--space-4)}

  /* Interactive card - entire card is clickable */
  .card-interactive{cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
  .card-interactive:hover{border-color:var(--color-brand);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
  .card-interactive:hover .btn-ghost-border:not(.card-interactive-child .btn-ghost-border){background:var(--color-brand);color:#111;border-color:var(--color-brand)}
  .card-interactive .card-body > *{position:relative;z-index:2}
  .card-interactive .card-body button,.card-interactive .card-body select{position:relative;z-index:3}
  .card-interactive .card-footer{position:relative;z-index:0}
  /* Child elements within interactive cards - isolated from parent hover */
  .card-interactive-child{pointer-events:auto;cursor:default;position:relative;z-index:2}
  .card-interactive-child button{position:relative;z-index:4}

  /* Info box component - reusable help/alert boxes */
  .info-box{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border:1px solid;border-radius:var(--radius-lg);background:var(--color-surface-2)}
  .info-box-icon{flex-shrink:0;font-size:var(--text-xl)}
  .info-box-content{flex:1;display:flex;flex-direction:column;gap:var(--space-2)}
  .info-box-title{font-size:var(--text-sm);font-weight:600;margin:0}
  .info-box-message{font-size:var(--text-xs);color:var(--color-text-muted);margin:0;line-height:1.5}

  /* Info box variants */
  .info-box-info{background:rgba(59,130,246,0.1);border-color:var(--color-info)}
  .info-box-info .info-box-icon{color:var(--color-info)}
  .info-box-success{background:rgba(22,163,74,0.1);border-color:var(--color-success)}
  .info-box-success .info-box-icon{color:var(--color-success)}
  .info-box-warning{background:rgba(245,158,11,0.1);border-color:var(--color-warning)}
  .info-box-warning .info-box-icon{color:var(--color-warning)}
  .info-box-danger{background:rgba(239,68,68,0.1);border-color:var(--color-danger)}
  .info-box-danger .info-box-icon{color:var(--color-danger)}
  .info-box-neutral{background:var(--color-surface-2);border-color:var(--color-border)}
  .info-box-neutral .info-box-icon{color:var(--color-text-muted)}
  
  /* 🚨 CRITICAL: Container cards - Part of iPad Safari height flow chain */
  /* 🔥 ESSENTIAL: .card.flex-1 must have ALL these properties for cross-platform compatibility */
  /* ⚠️  DO NOT REMOVE: display:flex, flex-direction:column, flex:1 1 0, min-height:0 */
  /* ⚠️  DO NOT CHANGE: flex:1 1 0 to flex:1 1 auto (breaks iPad Safari height calculation) */
  .card.flex-1{
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    min-height:0;
    overflow:hidden;
  }
  /* 🔥 ESSENTIAL: Card body in layout cards must be part of flex chain */
  /* Avoid height:100% on iOS Safari; rely on flex sizing to prevent clipping */
  .card.flex-1 .card-body{flex:1;min-height:0;display:flex;flex-direction:column}
  .card.flex-1 .card-header{flex-shrink:0}
  .card.flex-1 .card-footer{flex-shrink:0}
  
  /* Container queries for responsive teaser cards */
  /* Enable container query on teaser cards - cards now respond to their own width */
  .card-teaser{container-type:inline-size;container-name:teaser}

  /* Teaser card hover effects - border color only */
  .card-teaser:hover{border-color:var(--color-brand)}
  .card-teaser[data-highlight="true"]{border-color:var(--color-brand)}

  /* Card left accent border utilities */
  .card-accent{border-left:3px solid var(--color-brand)}
  .card-accent-info{border-left:3px solid var(--color-info)}
  .card-accent-success{border-left:3px solid var(--color-success)}
  .card-accent-warning{border-left:3px solid var(--color-warning)}
  .card-accent-danger{border-left:3px solid var(--color-danger)}
  .card-accent-purple{border-left:3px solid var(--color-purple)}
  .card-accent-muted{border-left:3px solid var(--color-text-muted)}

  /* Card hover utility - brand border + lift effect */
  .card-hover{transition:border-color .15s ease,transform .2s ease,box-shadow .2s ease}
  .card-hover:hover{border-color:var(--color-brand);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
  .shadow-sm{box-shadow:none}
  .shadow-md{box-shadow:none}

  /* List teasers default layout (horizontal row) */
  .card.card-teaser .card-body{display:flex;flex-direction:row;align-items:center;gap:var(--space-3)}

  /* When container width < 400px, switch to compact layout */
  @container teaser (max-width: 400px) {
    .card.card-teaser .card-body{gap:var(--space-2)}
    .card.card-teaser .teaser-img{width:60px;height:60px}
    .card.card-teaser .text-lg{font-size:var(--text-base)}
    .card.card-teaser .text-base{font-size:var(--text-sm)}
    /* Hide details/meta row in compact mode */
    .card.card-teaser .teaser-details{display:none}
    .card.card-teaser .teaser-meta{display:none}
  }

  /* When container width < 300px, ultra-compact/mini layout */
  @container teaser (max-width: 300px) {
    .card.card-teaser{padding:var(--space-2)}
    .card.card-teaser .card-body{padding:var(--space-2);gap:var(--space-1);flex-direction:column;align-items:flex-start}
    .card.card-teaser .teaser-img{width:48px;height:48px}
    .card.card-teaser .teaser-img-mini{width:36px;height:36px}
    .card.card-teaser .text-lg{font-size:var(--text-sm)}
    .card.card-teaser .text-base{font-size:var(--text-xs)}
    /* Details already hidden from 400px breakpoint */
  }

  .rounded-md{border-radius:var(--radius-md)}

  /* Sizing utilities */
  .w-full{width:100%}
  .h-1{height:0.25rem}
  .h-2{height:0.5rem}
  .h-3{height:0.75rem}
  .h-4{height:1rem}
  .h-full{height:100%}
  .min-h-screen{min-height:100vh}
  .min-h-60vh{min-height:60vh}
  .max-h-50vh{max-height:50vh}
  .max-h-80{max-height:80px}
  .max-h-200{max-height:200px}
  .max-h-300{max-height:300px}
  .max-h-95vh{max-height:95vh}
  .overflow-auto{overflow:auto}
  .overflow-x-auto{overflow-x:auto}
  .overflow-y-visible{overflow-y:visible}
  .pe-auto{pointer-events:auto}
  .min-w-320{min-width:320px}
  .max-w-420{max-width:420px}
  .w-380{width:380px}
  .w-420{width:420px}
  .w-720{width:720px}
  .h-auto{height:auto}
  .h-95vh{height:95vh}
  .w-95vw{width:95vw}
  .max-w-95vw{max-width:95vw}
  .object-contain{object-fit:contain}

  /* Height utilities */
  .h-12{height:3rem}
  .h-20{height:5rem}
  .h-100{height:100%}
  .h-10{height:2.5rem}
  .min-h-0{min-height:0}

  /* Display utilities */
  .show{display:block}
  .hide{display:none}

  /* Border utilities */
  .border{border:1px solid var(--color-border)}
  .border-2{border:2px solid var(--color-border)}
  .border-b{border-bottom:1px solid var(--color-border)}
  .border-color-border{border-color:var(--color-border)}
  .border-color-brand{border-color:var(--color-brand)}
  .border-brand{border-color:var(--color-brand)}
  .border-base-300{border-color:var(--color-border)}
  .border-success{border-color:var(--color-success)}

  /* Toggle switch */
  .toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:44px;height:24px;border-radius:12px;transition:background 0.2s}
  .toggle-switch.toggle-off{background:var(--color-border)}
  .toggle-switch.toggle-on{background:var(--color-brand)}
  .toggle-knob{position:absolute;top:2px;width:20px;height:20px;background:white;border-radius:50%;transition:left 0.2s;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
  .toggle-knob.knob-left{left:2px}
  .toggle-knob.knob-right{left:22px}

  /* Background utilities */
  .bg-color-surface{background-color:var(--color-surface)}
  .bg-brand-subtle{background-color:rgba(245, 158, 11, 0.1)}

  /* Text color utilities */
  .text-danger{color:var(--color-danger)}
  .text-success{color:var(--color-success)}
  .text-warning{color:var(--color-warning)}
  .text-info{color:var(--color-info)}
  .text-secondary{color:var(--color-text-secondary)}

  /* Dashboard stat card variants using data attributes */
  .stat-card{padding:1rem;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;text-align:center}
  .stat-card[data-variant="success"]{background:rgba(22, 163, 74, 0.1);color:var(--color-text)}
  .stat-card[data-variant="success"] .stat-value{color:var(--color-success)}
  .stat-card[data-variant="warning"]{background:rgba(245, 158, 11, 0.1);color:var(--color-text)}
  .stat-card[data-variant="warning"] .stat-value{color:var(--color-warning)}
  .stat-card[data-variant="danger"]{background:rgba(239, 68, 68, 0.1);color:var(--color-text)}
  .stat-card[data-variant="danger"] .stat-value{color:var(--color-danger)}
  .stat-card[data-variant="info"]{background:rgba(59, 130, 246, 0.1);color:var(--color-text)}
  .stat-card[data-variant="info"] .stat-value{color:var(--color-info)}
  .stat-card[data-variant="primary"]{background:rgba(245, 158, 11, 0.1);color:var(--color-text)}
  .stat-card[data-variant="primary"] .stat-value{color:var(--color-brand)}
  .stat-value{font-size:var(--text-3xl);font-weight:700}
  .stat-label{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.25rem}

  /* Status indicator dots using data attributes */
  .status-dot{width:0.75rem;height:0.75rem;border-radius:50%}
  .status-dot[data-status="available"],.status-dot[data-status="success"],.status-dot[data-status="completed"]{background:var(--color-success)}
  .status-dot[data-status="rented"],.status-dot[data-status="active"],.status-dot[data-status="info"]{background:var(--color-info)}
  .status-dot[data-status="maintenance"],.status-dot[data-status="pending"],.status-dot[data-status="warning"]{background:var(--color-warning)}
  .status-dot[data-status="repair"],.status-dot[data-status="failed"],.status-dot[data-status="danger"]{background:var(--color-danger)}
  .status-dot[data-status="retired"],.status-dot[data-status="inactive"]{background:var(--color-text-muted)}

  /* Text utilities */
  .text-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace}
  .text-capitalize{text-transform:capitalize}
  .text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .text-dark{color:#111}
  .text-gray-600{color:#6b7280}
  .text-gray-800{color:#1f2937}
  .uppercase{text-transform:uppercase}
  .pre-wrap{white-space:pre-wrap}
  .break-words{overflow-wrap:anywhere}
  .leading-normal{line-height:1.5}
  .leading-tight{line-height:1.25}
  .text-center{text-align:center}

  /* Width utilities */
  .min-w-140{min-width:140px}
  .min-w-150{min-width:150px}
  .min-w-200{min-width:200px}
  .min-w-300{min-width:300px}
  .w-auto{width:auto}
  .w-10{width:2.5rem}
  .w-12{width:3rem}
  .h-10{height:2.5rem}
  .h-12{height:3rem}
  .w-16{width:4rem}
  .h-16{height:4rem}
  .max-w-80{max-width:80px}
  .max-w-100{max-width:100px}
  .max-w-200{max-width:200px}
  .max-w-sm{max-width:24rem}

  /* Filter utilities */
  .drop-shadow{filter:none}

  /* Scrollbar utilities */
  .scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}
  .scrollbar-none::-webkit-scrollbar{display:none}

  /* Flex utilities */
  .shrink-0{flex-shrink:0}

  /* Cursor utilities */
  .cursor-pointer{cursor:pointer}

  /* Position utilities */
  .relative{position:relative!important}
  .absolute{position:absolute!important}
  .sticky{position:sticky!important}
  .top-0{top:0!important}
  .top-2{top:var(--space-2)!important}
  .top-3{top:var(--space-3)!important}
  .top-4{top:var(--space-4)!important}
  .top-80{top:80px!important}
  .top-1\/2,.top-50{top:50%!important}
  .bottom-0{bottom:0!important}
  .bottom-2{bottom:var(--space-2)!important}
  .bottom-3{bottom:var(--space-3)!important}
  .bottom-full{bottom:100%!important}
  .left-0{left:0!important}
  .left-2{left:var(--space-2)!important}
  .left-3{left:var(--space-3)!important}
  .left-1\/2{left:50%!important}
  .right-0{right:0!important}
  .right-1{right:0.25rem!important}
  .right-2{right:var(--space-2)!important}
  .right-3{right:var(--space-3)!important}
  .inset-0{top:0!important;right:0!important;bottom:0!important;left:0!important}
  .-translate-y-1\/2,.-translate-y-50{transform:translateY(-50%)!important}
  .-translate-x-1\/2{transform:translateX(-50%)!important}
  .pr-12{padding-right:3rem!important}
  .px-3{padding-left:var(--space-3)!important;padding-right:var(--space-3)!important}
  .py-1{padding-top:var(--space-1)!important;padding-bottom:var(--space-1)!important}
  .mb-2{margin-bottom:var(--space-2)!important}
  .pt-3{padding-top:var(--space-3)!important}

  /* Height utilities */
  .h-8{height:2rem!important}
  .h-12{height:3rem!important}

  /* Width utilities */
  .w-px{width:1px!important}
  .w-1{width:0.25rem!important}

  /* Background utilities */
  .bg-surface-2{background:var(--color-surface-2)!important}
  .bg-brand{background:var(--color-brand)!important}
  .bg-border{background:var(--color-border)!important}
  .text-black{color:#000!important}

  /* Gradient utilities */
  .bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))!important}
  .from-danger{--tw-gradient-from:var(--color-danger);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(239,68,68,0))}
  .via-warning{--tw-gradient-stops:var(--tw-gradient-from),var(--color-warning),var(--tw-gradient-to,rgba(245,158,11,0))}
  .to-success{--tw-gradient-to:var(--color-success)}
  .opacity-20{opacity:0.2!important}
  .opacity-50{opacity:0.5!important}

  /* Shadow utilities */
  .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)!important}

  /* Overflow utilities */
  .overflow-hidden{overflow:hidden!important}

  /* Transition utilities */
  .transition-all{transition:all .15s ease!important}
  .duration-300{transition-duration:.3s!important}

  /* Collapse animation utility */
  .transition-collapse{
    overflow:hidden;
    transition:max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    max-height:500px;
    opacity:1;
  }
  .transition-collapse.collapsed{
    max-height:0;
    opacity:0;
    margin-top:0!important;
    margin-bottom:0!important;
  }

  /* Text utilities */
  .whitespace-nowrap{white-space:nowrap!important}
  .text-center{text-align:center!important}
  .text-right{text-align:right!important}

  /* Border utilities */
  .border-t{border-top:1px solid var(--color-border)!important}
  .rounded-md{border-radius:var(--radius-md)!important}
  .rounded-lg{border-radius:var(--radius-lg)!important}

  /* Calendar-specific layout utilities */
  .calendar-grid-month{display:grid;grid-template-columns:40px repeat(7,1fr);flex:1;min-height:0}
  .calendar-month-header{position:sticky;top:0;background:var(--color-bg);z-index:20}
  .calendar-week-wrapper{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
  .calendar-spanning-lanes{position:absolute;top:30px;left:40px;right:0;display:flex;flex-direction:column;gap:2px;z-index:5;pointer-events:none}
  .calendar-spanning-lanes > *{pointer-events:auto}
  .calendar-event{padding:5px;margin:0 5px}
  .calendar-day-cell{position:relative;min-height:100px;border-radius:var(--radius-md);transition:background-color 0.15s ease}
  .calendar-day-cell:hover{background-color:var(--color-surface-2)}
  .calendar-events-container{max-height:60px;pointer-events:none}
  .calendar-events-container > *{pointer-events:auto}
  .grid-7-col{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}

  /* Grid span utilities for calendar events (1-indexed for grid-column) */
  .grid-span-1-1{grid-column:1/2}.grid-span-1-2{grid-column:1/3}.grid-span-1-3{grid-column:1/4}.grid-span-1-4{grid-column:1/5}.grid-span-1-5{grid-column:1/6}.grid-span-1-6{grid-column:1/7}.grid-span-1-7{grid-column:1/8}
  .grid-span-2-2{grid-column:2/3}.grid-span-2-3{grid-column:2/4}.grid-span-2-4{grid-column:2/5}.grid-span-2-5{grid-column:2/6}.grid-span-2-6{grid-column:2/7}.grid-span-2-7{grid-column:2/8}
  .grid-span-3-3{grid-column:3/4}.grid-span-3-4{grid-column:3/5}.grid-span-3-5{grid-column:3/6}.grid-span-3-6{grid-column:3/7}.grid-span-3-7{grid-column:3/8}
  .grid-span-4-4{grid-column:4/5}.grid-span-4-5{grid-column:4/6}.grid-span-4-6{grid-column:4/7}.grid-span-4-7{grid-column:4/8}
  .grid-span-5-5{grid-column:5/6}.grid-span-5-6{grid-column:5/7}.grid-span-5-7{grid-column:5/8}
  .grid-span-6-6{grid-column:6/7}.grid-span-6-7{grid-column:6/8}
  .grid-span-7-7{grid-column:7/8}
  .calendar-week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--color-border)}
  .calendar-week-day{min-height:400px}
  .calendar-day-view{display:flex;flex-direction:column;flex:1;min-height:0}
  .calendar-year-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);padding:var(--space-4)}
  .mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
}

/* --- toggle utilities (selection state) --- */
.toggle-active { outline: 2px solid var(--color-primary, #4f46e5); outline-offset: 2px; }
.toggle-muted { opacity: 0.6; }


/* Image helpers - stable dimensions prevent jitter on re-render */
.table-img{max-height:80px;object-fit:contain}
.teaser-img{
  display:block;
  flex-shrink:0;
  width:80px;
  height:80px;
  object-fit:cover;
  background:var(--color-bg-primary);
  border-radius:var(--radius-lg)
}
.teaser-img-mini{
  display:block;
  flex-shrink:0;
  width:48px;
  height:48px;
  object-fit:cover;
  background:var(--color-bg-primary);
  border-radius:var(--radius-md)
}

/* Logo sizing standards */
.logo-xs{
  display:block;
  flex-shrink:0;
  width:16px;
  height:16px;
  object-fit:contain
}
.logo-sm{
  display:block;
  flex-shrink:0;
  width:20px;
  height:20px;
  object-fit:contain
}
.logo-md{
  display:block;
  flex-shrink:0;
  width:32px;
  height:32px;
  object-fit:contain
}
.logo-lg{
  display:block;
  flex-shrink:0;
  max-width:120px;
  max-height:80px;
  object-fit:contain
}

/* Selection grid image sizing */
.selector-img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:var(--color-surface-2);
  border-radius:var(--radius-md)
}

/* View header standard height */
.view-header{height:50px;padding-right:var(--space-1)}

/* Table utilities */
.table-fixed{table-layout:fixed}

/* Scrollbar gutter stability to keep header/body widths aligned */
.scrollbar-gutter-stable{scrollbar-gutter:stable}

/* Shimmer text sizing utilities */
.shimmer-text{height:16px;border-radius:4px}
.shimmer-text-sm{width:40px}
.shimmer-text-md{width:60px}
.shimmer-text-lg{width:80px}

/* Calendar event period-based visual theming */
.calendar-event[data-period="draft"]{border-left:3px solid var(--color-period-draft);background:rgba(251, 191, 36, 0.15)}
.calendar-event[data-period="current"]{border-left:3px solid var(--color-period-current);background:rgba(59, 130, 246, 0.15)}
.calendar-event[data-period="upcoming"]{border-left:3px solid var(--color-period-upcoming);background:rgba(34, 197, 94, 0.15)}
.calendar-event[data-period="past"]{border-left:3px solid var(--color-period-past);background:rgba(159, 180, 191, 0.15)}

/* Calendar event status-based visual theming (for payments, tasks, etc.) */
.calendar-event[data-status="pending"]{border-left:3px solid var(--color-status-pending);background:rgba(251, 191, 36, 0.15)}
.calendar-event[data-status="processing"]{border-left:3px solid var(--color-status-pending);background:rgba(251, 191, 36, 0.15)}
.calendar-event[data-status="completed"]{border-left:3px solid var(--color-status-completed);background:rgba(34, 197, 94, 0.15)}
.calendar-event[data-status="succeeded"]{border-left:3px solid var(--color-status-succeeded);background:rgba(34, 197, 94, 0.15)}
.calendar-event[data-status="failed"]{border-left:3px solid var(--color-status-failed);background:rgba(239, 68, 68, 0.15)}
.calendar-event[data-status="declined"]{border-left:3px solid var(--color-status-declined);background:rgba(239, 68, 68, 0.15)}
.calendar-event[data-status="refunded"]{border-left:3px solid var(--color-status-refunded);background:rgba(59, 130, 246, 0.15)}
.calendar-event[data-status="cancelled"]{border-left:3px solid var(--color-status-cancelled);background:rgba(159, 180, 191, 0.15)}

/* Calendar day cell styling */
.mini-calendar > div[data-date]{transition:all 0.2s ease;border-radius:50%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.mini-calendar > div[data-date]:hover{border:2px solid var(--color-brand);transform:scale(1.1)}
.mini-calendar > div[data-date].has-events{background:var(--color-brand);color:#111;font-weight:bold}
.mini-calendar > div[data-date].has-events:hover{background:var(--color-brand-dark)}

/* Month view day number hover effect */



/* Rate tier styling */
.rate-tier{border:2px solid transparent}
.rate-tier-active{border-color:var(--color-brand)!important;background:var(--color-surface-3)!important}

/* Ring/Border utilities for gradient segments */
.ring-2{box-shadow:inset 0 0 0 2px rgba(0,0,0,0.1)}
.ring-brand{box-shadow:inset 0 0 0 2px var(--color-brand)}
.ring-inset{box-shadow:inset 0 0 0 2px currentColor}

/* Text truncation utility */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Standardized card title */
.card-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text);text-transform:uppercase;letter-spacing:0.05em}

/* ===== CLIENT PAGES UTILITIES ===== */
/* Added 2025-11-01 for client pages CSS refactor */

/* Extended Padding Utilities */
.p-5{padding:1.25rem}
.p-6{padding:var(--space-6)}
.p-8{padding:var(--space-8)}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.pb-6{padding-bottom:var(--space-6)}
.pb-8{padding-bottom:var(--space-8)}
.pt-4{padding-top:var(--space-4)}
.pt-6{padding-top:var(--space-6)}

/* Extended Margin Utilities */
.m-auto{margin:auto}
.mt-1{margin-top:var(--space-1)}
.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}
.mt-8{margin-top:var(--space-8)}
.mb-1{margin-bottom:var(--space-1)}
.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}
.mb-8{margin-bottom:var(--space-8)}
.mr-2{margin-right:var(--space-2)}
.mr-3{margin-right:var(--space-3)}
.mr-4{margin-right:var(--space-4)}
.ml-2{margin-left:var(--space-2)}
.ml-3{margin-left:var(--space-3)}
.ml-4{margin-left:var(--space-4)}
.ml-auto{margin-left:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.my-4{margin-top:var(--space-4);margin-bottom:var(--space-4)}

/* Max Width Containers */
.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.max-w-600{max-width:600px}

/* Width Utilities */
.w-32{width:8rem}
.w-40{width:10rem}
.w-48{width:12rem}
.w-56{width:14rem}
.w-64{width:16rem}
.w-72{width:18rem}
.w-80{width:20rem}
.w-96{width:24rem}

/* Min Width Utilities */
.min-w-0{min-width:0}
.min-w-full{min-width:100%}
.min-w-120{min-width:120px}
.min-w-140{min-width:140px}
.min-w-180{min-width:180px}
.min-w-200{min-width:200px}
.min-w-300{min-width:300px}
.min-w-320{min-width:320px}
.min-w-400{min-width:400px}

/* Height Utilities */
.h-32{height:8rem}
.h-40{height:10rem}
.h-48{height:12rem}
.h-56{height:14rem}
.h-64{height:16rem}
.h-screen{height:100vh}

/* Background Colors */
.bg-surface{background-color:var(--color-surface)}
.bg-surface-dark{background-color:rgba(0,0,0,0.6)}
.bg-surface-3{background-color:var(--color-surface-3)}
.bg-bg{background-color:var(--color-bg)}

/* Text Colors */
.text-brand{color:var(--color-brand)}
.text-muted{color:var(--color-text-muted)}

/* Border Radius */
.rounded-sm{border-radius:var(--radius-sm)}
.rounded{border-radius:var(--radius-md)}
.rounded-xl{border-radius:var(--radius-xl)}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:var(--radius-full)}
.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}
.rounded-t-md{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}
.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}
.rounded-b-sm{border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.rounded-b-md{border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}
.rounded-b-lg{border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}

/* Opacity Utilities */
.opacity-0{opacity:0}
.opacity-10{opacity:0.1}
.opacity-25{opacity:0.25}
.opacity-40{opacity:0.4}
.opacity-60{opacity:0.6}
.opacity-70{opacity:0.7}
.opacity-80{opacity:0.8}
.opacity-90{opacity:0.9}
.opacity-100{opacity:1}

/* Text Alignment */
.text-left{text-align:left}

/* Stat Card Neutral Variant - Professional Look */
.stat-card-neutral{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.stat-card-neutral .stat-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;margin-bottom:var(--space-2)}
.stat-card-neutral .stat-value{font-size:var(--text-3xl);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}
.stat-card-neutral .stat-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}

/* Aspect Ratio Utilities */
.aspect-square{aspect-ratio:1/1}
.aspect-video{aspect-ratio:16/9}

/* ===== RENTAL CARDS UTILITIES ===== */
/* Added 2025-11-19 for rental card refactor */

/* Border utilities */
.border-3{border-width:3px;border-style:solid}
.border-brand{border-color:var(--color-brand)}
.border-success{border-color:var(--color-success)}
.border-warning{border-color:var(--color-warning)}
.border-danger{border-color:var(--color-danger)}
.border-info{border-color:var(--color-info)}
.border-purple{border-color:var(--color-purple)}
.border-border{border-color:var(--color-border)}

/* Form controls */
.form-checkbox{appearance:none;width:1rem;height:1rem;border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;position:relative;transition:.2s ease all}
.form-checkbox:checked{background:var(--color-brand);border-color:var(--color-brand)}
.form-checkbox:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:.75rem;font-weight:bold}
.form-checkbox:hover{border-color:var(--color-brand)}
.form-checkbox:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px var(--color-brand)20}

.form-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}

/* Layout utilities */
.items-start{align-items:flex-start}
.justify-end{justify-content:flex-end}

/* Opacity utilities */
.opacity-30{opacity:0.3}

/* Background color variants */
.bg-success{background-color:var(--color-success)}
.bg-success-subtle{background-color:rgba(22,163,74,0.1)}
.bg-warning{background-color:var(--color-warning)}
.bg-warning-subtle{background-color:rgba(245,158,11,0.1)}
.bg-danger{background-color:var(--color-danger)}
.bg-danger-subtle{background-color:rgba(239,68,68,0.1)}
.bg-info{background-color:var(--color-info)}
.bg-info-subtle{background-color:rgba(59,130,246,0.1)}
.bg-purple{background-color:var(--color-purple)}
.bg-purple-subtle{background-color:rgba(168,85,247,0.1)}
.bg-surface-subtle{background-color:var(--color-surface-2)}

/* Text color variants */
.text-white{color:#fff}
.text-info-dark{color:#1e40af}
.text-success-dark{color:#15803d}
.text-warning-dark{color:#b45309}
.text-danger-dark{color:#b91c1c}
.text-default{color:var(--color-text)}

/* Icon size utilities */
.icon-2xl{font-size:2rem}

/* Card section utility */
.card-section{padding:var(--space-4);border-bottom:1px solid var(--color-border)}