/* =========================================================================
   BuildDesk Admin Panel Theme
   Derived from Flutter: app_colors.dart, app_theme.dart, app_text_styles.dart
   Include this file once (e.g. layouts/app.blade.php) and reuse across all
   Blade views via the classes/utilities below.
   ========================================================================= */

:root{
  /* ---- Brand ---- */
  --color-primary: #15803D;
  --color-primary-dark: #0E5C2C;
  --color-primary-light: #22A55A;
  --color-primary-surface: #E8F5EC;
  --color-primary-surface-strong: #D3EDDC;

  --color-navy: #0F2A43;
  --color-navy-soft: #17395B;

  /* ---- Neutrals ---- */
  --color-bg: #F4F6F8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8FAFB;
  --color-border: #E4E9ED;
  --color-border-strong: #D3DAE0;
  --color-divider: #EEF1F4;

  --color-text-primary: #111C2E;
  --color-text-secondary: #5B6B7E;
  --color-text-tertiary: #8A99AA;
  --color-text-on-dark: #FFFFFF;

  /* ---- Accents ---- */
  --color-blue: #2563EB;         --color-blue-surface: #E7EFFE;
  --color-orange: #F97316;       --color-orange-surface: #FEF0E4;
  --color-amber: #F59E0B;        --color-amber-surface: #FEF6E4;
  --color-purple: #7C3AED;       --color-purple-surface: #F1EAFE;
  --color-pink: #DB2777;         --color-pink-surface: #FCE9F1;
  --color-teal: #0D9488;         --color-teal-surface: #E3F5F3;
  --color-red: #DC2626;          --color-red-surface: #FCEAEA;
  --color-indigo: #4F46E5;       --color-indigo-surface: #EBEAFD;

  /* ---- Semantic ---- */
  --color-success: #16A34A;      --color-success-surface: #E7F6EC;
  --color-warning: #F59E0B;      --color-warning-surface: #FEF6E4;
  --color-danger: #DC2626;       --color-danger-surface: #FCEAEA;
  --color-star: #F5A623;

  /* ---- Gradients ---- */
  --gradient-hero: linear-gradient(135deg, #F3F8F4, #E6F2EA);
  --gradient-primary: linear-gradient(135deg, #1B9550, #13703A);
  --gradient-navy: linear-gradient(135deg, #12314E, #091D30);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-xxl: 24px;
  --radius-pill: 999px;

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* ---- Sizes ---- */
  --button-height: 48px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 4px rgba(16,24,40,0.04);
  --shadow-sm: 0 3px 10px rgba(16,24,40,0.06);
  --shadow-md: 0 6px 18px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 28px rgba(16,24,40,0.10);
  --shadow-primary: 0 6px 16px rgba(21,128,61,0.20);

  /* ---- Typography ---- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   Base
   ========================================================================= */
*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: 13.5px;
  line-height: 1.5;
}

a{ color: var(--color-primary); text-decoration:none; }
a:hover{ color: var(--color-primary-dark); }

hr, .divider{ border:none; border-top:1px solid var(--color-divider); }

/* =========================================================================
   Typography
   ========================================================================= */
.text-display-lg{ font-size:30px; line-height:1.16; font-weight:800; letter-spacing:-0.7px; color:var(--color-text-primary); }
.text-display-md{ font-size:26px; line-height:1.18; font-weight:800; letter-spacing:-0.6px; color:var(--color-text-primary); }
.text-display-sm{ font-size:22px; line-height:1.22; font-weight:800; letter-spacing:-0.4px; color:var(--color-text-primary); }

.text-h1{ font-size:20px; line-height:1.28; font-weight:700; letter-spacing:-0.3px; color:var(--color-text-primary); }
.text-h2{ font-size:17px; line-height:1.3;  font-weight:700; letter-spacing:-0.2px; color:var(--color-text-primary); }
.text-h3{ font-size:15px; line-height:1.34; font-weight:700; letter-spacing:-0.1px; color:var(--color-text-primary); }
.text-h4{ font-size:13.5px; line-height:1.36; font-weight:700; color:var(--color-text-primary); }

.text-body-lg{ font-size:15px; line-height:1.5; font-weight:400; color:var(--color-text-secondary); }
.text-body{ font-size:13.5px; line-height:1.5; font-weight:400; color:var(--color-text-secondary); }
.text-body-sm{ font-size:12px; line-height:1.45; font-weight:400; color:var(--color-text-secondary); }

.text-label{ font-size:13.5px; line-height:1.2; font-weight:600; color:var(--color-text-primary); }
.text-label-sm{ font-size:11.5px; line-height:1.2; font-weight:600; color:var(--color-text-secondary); }
.text-caption{ font-size:10.5px; line-height:1.25; font-weight:500; color:var(--color-text-tertiary); }

.text-overline{ font-size:10px; line-height:1.2; font-weight:700; letter-spacing:0.9px; text-transform:uppercase; color:var(--color-text-on-dark); }

.text-price-lg{ font-size:26px; line-height:1.1; font-weight:800; letter-spacing:-0.6px; color:var(--color-text-primary); }
.text-price{ font-size:19px; line-height:1.1; font-weight:800; letter-spacing:-0.4px; color:var(--color-text-primary); }
.text-price-struck{ font-size:13px; line-height:1.1; font-weight:500; color:var(--color-text-tertiary); text-decoration:line-through; }

/* =========================================================================
   Layout — sidebar / topbar / content shell
   ========================================================================= */
.admin-layout{ display:flex; min-height:100vh; background:var(--color-bg); }

.admin-sidebar{
  width:260px;
  flex-shrink:0;
  background:var(--gradient-navy);
  color:var(--color-text-on-dark);
  padding:var(--space-md);
}
.admin-sidebar .brand{ font-size:17px; font-weight:700; color:#fff; padding:var(--space-sm) var(--space-sm) var(--space-lg); }
.admin-sidebar nav a{
  display:flex; align-items:center; gap:var(--space-sm);
  padding:10px 12px; border-radius:var(--radius-md);
  color:rgba(255,255,255,0.72); font-size:13.5px; font-weight:600;
  margin-bottom:2px;
}
.admin-sidebar nav a:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.admin-sidebar nav a.active{ background:var(--color-primary); color:#fff; }

.admin-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.admin-topbar{
  height:64px;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-lg);
}

.admin-content{ padding:var(--space-lg); }

/* =========================================================================
   Card
   ========================================================================= */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
}
.card-header{ padding:var(--space-md); border-bottom:1px solid var(--color-divider); }
.card-body{ padding:var(--space-md); }
.card-footer{ padding:var(--space-md); border-top:1px solid var(--color-divider); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--button-height);
  padding:0 20px;
  border-radius:var(--radius-md);
  font-size:13.5px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary{ background:var(--color-primary); color:#fff; }
.btn-primary:hover{ background:var(--color-primary-dark); }

.btn-outline{ background:transparent; color:var(--color-primary); border-color:var(--color-border-strong); }
.btn-outline:hover{ background:var(--color-primary-surface); }

.btn-text{ background:transparent; color:var(--color-primary); height:auto; padding:6px 8px; }
.btn-text:hover{ background:var(--color-primary-surface); }

.btn-danger{ background:var(--color-danger); color:#fff; }
.btn-danger:hover{ background:#B91C1C; }

.btn-sm{ height:36px; padding:0 14px; font-size:12px; }

/* =========================================================================
   Forms
   ========================================================================= */
.form-label{ display:block; margin-bottom:6px; font-size:13.5px; font-weight:500; color:var(--color-text-primary); }

.form-control{
  width:100%;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:14px var(--space-md);
  font-size:13.5px;
  color:var(--color-text-primary);
  outline:none;
}
.form-control::placeholder{ color:var(--color-text-tertiary); }
.form-control:focus{ border-color:var(--color-primary); border-width:1.4px; }
.form-control.is-invalid{ border-color:var(--color-danger); }

/* =========================================================================
   Badges / Chips
   ========================================================================= */
.badge{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  font-size:11.5px; font-weight:600;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  color:var(--color-text-secondary);
}
.badge-primary{ background:var(--color-primary-surface); color:var(--color-primary-dark); border-color:transparent; }
.badge-success{ background:var(--color-success-surface); color:var(--color-success); border-color:transparent; }
.badge-warning{ background:var(--color-warning-surface); color:var(--color-warning); border-color:transparent; }
.badge-danger{ background:var(--color-danger-surface); color:var(--color-danger); border-color:transparent; }
.badge-info{ background:var(--color-blue-surface); color:var(--color-blue); border-color:transparent; }

/* =========================================================================
   Table
   ========================================================================= */
.table{ width:100%; border-collapse:collapse; background:var(--color-surface); }
.table th{
  text-align:left; font-size:11.5px; font-weight:600; color:var(--color-text-secondary);
  text-transform:uppercase; letter-spacing:0.4px;
  padding:12px var(--space-md); border-bottom:1px solid var(--color-border); background:var(--color-surface-alt);
}
.table td{ padding:12px var(--space-md); border-bottom:1px solid var(--color-divider); font-size:13.5px; color:var(--color-text-primary); }
.table tr:hover td{ background:var(--color-surface-alt); }

/* =========================================================================
   Alerts / Toast
   ========================================================================= */
.alert{ padding:12px var(--space-md); border-radius:var(--radius-md); font-size:13.5px; border:1px solid transparent; }
.alert-success{ background:var(--color-success-surface); color:var(--color-primary-dark); }
.alert-warning{ background:var(--color-warning-surface); color:#92400E; }
.alert-danger{ background:var(--color-danger-surface); color:#991B1B; }

.toast{
  background:var(--color-text-primary); color:#fff;
  padding:12px var(--space-md); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); font-size:13.5px;
}

/* =========================================================================
   Utilities
   ========================================================================= */
.shadow-xs{ box-shadow:var(--shadow-xs); }
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow-md{ box-shadow:var(--shadow-md); }
.shadow-lg{ box-shadow:var(--shadow-lg); }
.shadow-primary{ box-shadow:var(--shadow-primary); }

.rounded-sm{ border-radius:var(--radius-sm); }
.rounded-md{ border-radius:var(--radius-md); }
.rounded-lg{ border-radius:var(--radius-lg); }
.rounded-pill{ border-radius:var(--radius-pill); }

.bg-primary{ background:var(--color-primary); }
.bg-primary-surface{ background:var(--color-primary-surface); }
.bg-navy{ background:var(--color-navy); }
.text-primary{ color:var(--color-primary); }
.text-secondary{ color:var(--color-text-secondary); }
.text-tertiary{ color:var(--color-text-tertiary); }