/* global.css — 2025 Mobile-First + Collapsible Sidebar + Light/Dark Mode */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* -------------------------------------------------
   Worqt Brand Palette – ready-to-use CSS variables
   ------------------------------------------------- */
:root {
  /* PRIMARY */
  --brand-blue:      #3A47F4;   /* Worqt Blue - CTAs, links, highlights */
  --brand-midnight:  #0D0F1A;   /* Worqt Midnight - Dark mode bg */
  --brand-cloud:     #F8F9FC;   /* Worqt Cloud - Light mode bg */

  /* SECONDARY – UI surfaces */
  --panel-light:     #FFFFFF;   /* Panel Light - Light mode cards */
  --panel-dark:      #1A1D2C;   /* Panel Dark - Dark mode cards */
  --border-light:    #E1E4EC;   /* Soft Border - Light mode dividers */
  --border-dark:     #2A2D3C;   /* Soft Border Dark - Dark mode dividers */

  /* ACCENT COLORS */
  --accent-green:    #26C281;   /* Accent Green - Success */
  --accent-yellow:   #F6C544;   /* Accent Yellow - Warning */
  --accent-red:      #E25555;   /* Accent Red - Error */
  --accent-purple:   #7C5CFC;   /* Accent Purple - Automation */
  --accent-cyan:     #24D1E4;   /* Accent Cyan - Workflows */

  /* TYPOGRAPHY */
  --text-primary:    #11131C;   /* Primary Text */
  --text-muted:      #6B7280;   /* Muted Text */
  --text-darkmode:   #F2F3F7;   /* Dark Mode Text */
}

/* -------------------------------------------------
   THEME VARIABLES – mapped to Worqt palette
   ------------------------------------------------- */
:root {
  /* Dark Mode (default) */
  --bg:            var(--brand-midnight);    /* #0D0F1A */
  --surface:       var(--panel-dark);        /* #1A1D2C */
  --surface-2:     #24283A;                  /* Dark Elevated Panel */
  --border:        var(--border-dark);       /* #2A2D3C */
  --text:          var(--text-darkmode);     /* #F2F3F7 */
  --text-muted:    #8D93A6;                  /* Dark Mode Muted Text */
  --primary:       var(--brand-blue);        /* #3A47F4 */
  --primary-hover: #2E38D9;                  /* Slightly darker blue for hover */
  --success:       var(--accent-green);      /* #26C281 */
  --danger:        var(--accent-red);        /* #E25555 */
  --warning:       var(--accent-yellow);     /* #F6C544 */
  --radius:        12px;
  --shadow:        0 8px 32px rgba(0,0,0,0.3);
  --transition:    all 0.2s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="light"] {
  --bg:            var(--brand-cloud);       /* #F8F9FC */
  --surface:       var(--panel-light);       /* #FFFFFF */
  --surface-2:     #f1f3f5;                  /* Light mode secondary surface */
  --border:        var(--border-light);      /* #E1E4EC */
  --text:          var(--text-primary);      /* #11131C */
  --text-muted:    var(--text-muted);        /* #6B7280 */
  --primary:       var(--brand-blue);        /* #3A47F4 */
  --primary-hover: #2E38D9;                  /* Slightly darker blue for hover */
  --success:       var(--accent-green);      /* #26C281 */
  --danger:        var(--accent-red);        /* #E25555 */
  --warning:       var(--accent-yellow);     /* #F6C544 */
  --shadow:        0 8px 32px rgba(0,0,0,0.08);
}

/* -------------------------------------------------
   BASE STYLES (unchanged – using new vars)
   ------------------------------------------------- */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
  transition:var(--transition);
}

/* LAYOUT */
.container { max-width:100%; padding:1rem; }
@media (min-width:768px){ .container{max-width:1200px;margin:0 auto;} }

/* CARDS & PANELS */
.card,.panel{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  transition:var(--transition);
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.2); }

/* GRID */
.grid-4{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr);}}

.form-group{margin-bottom:1rem;}
label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text);}
input,select,textarea{
  width:100%;padding:.875rem 1rem;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-size:1rem;
  transition:var(--transition);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(58,71,244,.2); /* Matches Worqt Blue RGB */
}

/* BUTTONS */
.btn{
  padding:.75rem 1.25rem;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);}
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:#2F3346;} /* Dark Mode Elevated Panel */
.btn-small{padding:.5rem .875rem;font-size:.875rem;}

/* ALERTS */
.alert{padding:1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem;}
.alert-success{background:rgba(38,194,129,.15);color:var(--success);border:1px solid rgba(38,194,129,.3);}
.alert-error{background:rgba(226,85,85,.15);color:var(--danger);border:1px solid rgba(226,85,85,.3);}

/* SIDEBAR – COLLAPSIBLE */
.sidebar{
  width:260px;background:var(--surface);border-right:1px solid var(--border);
  padding:1.5rem 0;position:fixed;left:0;top:0;bottom:0;
  overflow-y:auto;z-index:1000;transition:width .3s ease;overflow-x:hidden;
}
.sidebar.collapsed{width:70px;padding:1.5rem 0;}
.sidebar.collapsed .sidebar-header .logo,
.sidebar.collapsed .nav-item span{display:none;}
.sidebar.collapsed .nav-item{justify-content:center;padding:.75rem 0;}
.sidebar.collapsed .nav-item i{font-size:1.2rem;}

.collapse-toggle{
  position:absolute;right:-12px;top:1.5rem;
  width:24px;height:24px;background:var(--surface);
  border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.8rem;color:var(--text-muted);
  box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:1001;
  transition:var(--transition);
}
.collapse-toggle:hover{color:var(--primary);transform:scale(1.1);}

.main-content{
  margin-left:260px;transition:margin-left .3s ease;
  padding:1rem;min-height:100vh;
}
.main-content.expanded{margin-left:70px;}

/* Mobile auto-collapse */
@media (max-width:1024px){
  .sidebar{width:70px;padding:1.5rem 0;}
  .sidebar .logo,.sidebar .nav-item span{display:none;}
  .sidebar .nav-item{justify-content:center;padding:.75rem 0;}
  .main-content{margin-left:70px;}
  .collapse-toggle{display:none;}
}
.menu-toggle{display:flex;background:none;border:none;font-size:1.5rem;color:var(--text);cursor:pointer;}
@media (min-width:1024px){.menu-toggle{display:none;}}

/* HEADER */
.header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:1.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);flex-wrap:wrap;gap:1rem;
}
.header h1{font-size:1.5rem;font-weight:600;}

/* THEME TOGGLE */
.theme-toggle{
  background:var(--surface-2);border:1px solid var(--border);
  width:48px;height:28px;border-radius:14px;position:relative;
  cursor:pointer;transition:var(--transition);
}
.theme-toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:22px;height:22px;background:var(--primary);
  border-radius:50%;transition:transform .3s ease;
}
[data-theme="light"] .theme-toggle::after{
  transform:translateX(20px);background:#F6C544; /* Accent Yellow for light toggle */
}

/* NAVIGATION */
.nav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1.5rem;color:var(--text);
  text-decoration:none;transition:var(--transition);
}
.nav-item:hover,.nav-item.active{
  background:rgba(58,71,244,.15);color:var(--primary);
}
.nav-item i{width:20px;text-align:center;}

/* TABLE */
.table-container{
  overflow-x:auto;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
}
table{width:100%;border-collapse:collapse;}
th{
  background:var(--surface-2);padding:.75rem 1rem;
  text-align:left;font-weight:600;font-size:.9rem;
  color:var(--text-muted);border-bottom:1px solid var(--border);
}
td{padding:.75rem 1rem;border-bottom:1px solid var(--border);}
tr:hover{background:rgba(255,255,255,.03);}

/* BADGES */
.badge{
  padding:.25rem .75rem;border-radius:6px;
  font-size:.75rem;font-weight:600;
}
.badge.success{background:rgba(38,194,129,.2);color:var(--success);}
.badge.warning{background:rgba(246,197,68,.2);color:var(--warning);}
.badge.danger{background:rgba(226,85,85,.2);color:var(--danger);}

/* MODAL */
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;z-index:1000;padding:1rem;
}
.modal.active{display:flex;}
.modal-content{
  background:var(--surface);border-radius:var(--radius);
  width:100%;max-width:600px;max-height:90vh;overflow-y:auto;
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.modal-header{
  padding:1.5rem;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.modal-body{padding:1.5rem;}
.close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);}

/* FORM GRID */
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.form-grid > div{grid-column:span 2;}
.form-grid > div.half{grid-column:span 1;}
@media (max-width:768px){
  .form-grid{grid-template-columns:1fr;}
  .form-grid > div{grid-column:span 1;}
}

/* UTILITIES */
.text-center{text-align:center;}
.text-muted{color:var(--text-muted);font-size:.9rem;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:1.5rem;}

/* AUTH PAGES */
.auth-container{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:1rem;
}
.auth-card{
  width:100%;max-width:420px;background:var(--surface);
  border-radius:var(--radius);padding:2rem;
  box-shadow:var(--shadow);border:1px solid var(--border);
}
.logo{
  font-weight:700;font-size:1.8rem;
  background:linear-gradient(90deg,#3A47F4,#7C5CFC); /* Worqt Blue to Accent Purple */
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-align:center;margin-bottom:1.5rem;
}

/* AVATAR */
.avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--primary);display:flex;
  align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:.9rem;
}



/* ============================================= */
/* AUTH PAGE — MOBILE FIRST OPTIMIZATIONS        */
/* ============================================= */

.auth-page {
  display: flex;
  min-height: 100dvh; /* better than 100vh on mobile */
}

/* Center card perfectly on all screens */
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 1rem;
  width: 100%;
}

/* Responsive card width & padding */
.auth-card {
  width: 100%;
  max-width: 420px;        /* perfect mobile & desktop width */
  margin: 0 auto;
  padding: 2rem 1.5rem;    /* more breathing room on small screens */
  border-radius: 16px;
}

/* Logo sizing */
.auth-logo-img {
  height: 48px;
  width: auto;
  max-width: 80%;
}

/* Remove those extra <br> tags – spacing is now handled by margins */
.auth-form .mb-4 { margin-bottom: 1.5rem; }

/* Larger touch-friendly button on mobile */
@media (max-width: 480px) {
  .auth-card {
    padding: 2rem 1.25rem;
  }
  
  .btn-primary {
    font-size: 1.1rem;
    padding: 1rem !important;
    height: 56px; /* Apple HIG recommended minimum touch target */
  }
  
  .form-control {
    font-size: 1rem; /* prevents zoom on iOS */
    padding: 1rem;
  }
  
  label {
    font-size: 0.95rem;
  }
}

/* Optional: nicer focus visible ring for accessibility */
.form-control:focus {
  box-shadow: 0 0 0 4px rgba(58, 71, 244, .25);
}


/* ============================================= */
/* AUTH PAGE – LOGO FIX (clean & responsive)     */
/* ============================================= */

.auth-logo {
  height: 52px;                    /* Perfect size – not too big, not too small */
  width: auto;
  max-width: 280px;                /* Prevents it from ever getting huge */
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 8px rgba(58, 71, 244, 0.15));
}

/* On small mobile screens, make it slightly smaller */
@media (max-width: 480px) {
  .auth-logo {
    height: 46px;
  }
}

/* Dark mode? Keep logo crisp */
[data-theme="dark"] .auth-logo {
  filter: drop-shadow(0 2px 12px rgba(58, 71, 244, 0.25));
}