/* ================================================================
   Krishu Salon SAS — Global Stylesheet
   ================================================================ */
:root {
  --primary:       #6C3FC5;
  --primary-dark:  #5530a8;
  --primary-light: #8B5CF6;
  --accent:        #D4AF37;
  --accent-light:  #F0D060;
  --bg:            #F8F5FF;
  --bg-card:       #ffffff;
  --text:          #1e1b2e;
  --text-muted:    #6c757d;
  --border:        #e5dcf8;
  --sidebar-w:     240px;
}

/* ── Base ──────────────────────────────────────────────────── */
body { font-family:'Poppins',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; }
h1,h2,h3,h4 { font-family:'Playfair Display',serif; }
a { color:var(--primary); text-decoration:none; transition:color .2s; }
a:hover { color:var(--primary-dark); }
.text-accent { color:var(--accent) !important; }

/* ── Navbar ────────────────────────────────────────────────── */
.ks-navbar { background:linear-gradient(135deg, #2d1b69 0%, #4a2c9e 100%); backdrop-filter:blur(10px); padding:12px 0; box-shadow:0 2px 20px rgba(108,63,197,.3); }
.brand-icon { width:36px; height:36px; background:var(--accent); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#2d1b69; font-size:1rem; }
.brand-icon-lg { width:44px; height:44px; background:var(--accent); border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#2d1b69; font-size:1.2rem; }
.brand-text { font-family:'Playfair Display',serif; font-size:1.25rem; color:#fff; font-weight:700; }
.brand-accent { color:var(--accent); }
.ks-navbar .nav-link { color:rgba(255,255,255,.85) !important; font-weight:500; font-size:.9rem; padding:6px 12px !important; border-radius:6px; transition:all .2s; }
.ks-navbar .nav-link:hover { color:#fff !important; background:rgba(255,255,255,.1); }
.user-avatar-sm { width:28px; height:28px; background:var(--accent); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#2d1b69; font-weight:700; font-size:.8rem; }
.btn-accent { background:var(--accent) !important; color:#2d1b69 !important; border:none; font-weight:600; padding:7px 18px !important; border-radius:8px; transition:all .2s; }
.btn-accent:hover { background:var(--accent-light) !important; transform:translateY(-1px); box-shadow:0 4px 12px rgba(212,175,55,.3); }
.dropdown-menu { border:none; box-shadow:0 8px 32px rgba(108,63,197,.15); border-radius:12px; padding:8px; }
.dropdown-item { border-radius:8px; padding:8px 14px; font-size:.875rem; }
.dropdown-item:hover { background:var(--bg); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { background:linear-gradient(135deg, #2d1b69 0%, #6C3FC5 50%, #9B59B6 100%); min-height:560px; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-title { font-size:clamp(2rem,5vw,3.5rem); font-weight:700; color:#fff; line-height:1.2; }
.hero-subtitle { color:rgba(255,255,255,.8); font-size:1.1rem; }
.search-box { background:#fff; border-radius:16px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.search-box .form-control, .search-box .form-select { border:1.5px solid var(--border); border-radius:10px; padding:10px 16px; font-size:.9rem; }
.search-box .form-control:focus, .search-box .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,63,197,.1); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary { background:var(--primary) !important; border-color:var(--primary) !important; }
.btn-primary:hover { background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; transform:translateY(-1px); box-shadow:0 4px 12px rgba(108,63,197,.3); }
.btn-outline-primary { color:var(--primary) !important; border-color:var(--primary) !important; }
.btn-outline-primary:hover { background:var(--primary) !important; color:#fff !important; }
.btn { border-radius:10px; font-weight:500; font-size:.9rem; transition:all .2s; }
.btn-lg { padding:12px 28px !important; }
.btn-sm { padding:5px 14px !important; }

/* ── Cards ─────────────────────────────────────────────────── */
.ks-card { background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(108,63,197,.08); border:1px solid var(--border); transition:all .25s; }
.ks-card:hover { box-shadow:0 8px 32px rgba(108,63,197,.18); transform:translateY(-4px); }
.salon-card { overflow:hidden; cursor:pointer; }
.salon-card .salon-cover { height:200px; object-fit:cover; width:100%; }
.salon-card .salon-logo { width:60px; height:60px; border-radius:12px; object-fit:cover; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.salon-card-body { padding:16px; }
.salon-card .salon-name { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--text); }
.service-card { padding:16px; border:1.5px solid var(--border); border-radius:12px; transition:all .2s; }
.service-card:hover { border-color:var(--primary); background:var(--bg); }
.service-price { font-size:1.25rem; font-weight:700; color:var(--primary); }
.service-duration { font-size:.8rem; color:var(--text-muted); }

/* ── Dashboard Sidebar ─────────────────────────────────────── */
.panel-wrapper { display:flex; min-height:calc(100vh - 70px); }
.panel-sidebar { width:var(--sidebar-w); background:linear-gradient(180deg, #2d1b69 0%, #4a2c9e 100%); position:fixed; top:70px; bottom:0; overflow-y:auto; z-index:100; transition:transform .3s; padding:20px 0; }
.panel-content { margin-left:var(--sidebar-w); flex:1; padding:28px; min-width:0; }
.sidebar-brand { padding:0 20px 20px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:8px; }
.sidebar-brand h6 { color:#fff; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; margin:0; }
.sidebar-nav { list-style:none; padding:8px; margin:0; }
.sidebar-nav .nav-item { margin-bottom:2px; }
.sidebar-nav .nav-link { color:rgba(255,255,255,.75); padding:10px 16px; border-radius:10px; display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:500; transition:all .2s; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { background:rgba(255,255,255,.15); color:#fff; }
.sidebar-nav .nav-link i { width:18px; text-align:center; font-size:.9rem; }
.sidebar-section { padding:12px 20px 4px; font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.4); font-weight:600; }

/* ── Stats Cards ────────────────────────────────────────────── */
.stat-card { border-radius:16px; padding:20px; color:#fff; position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; right:-20px; top:-20px; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.1); }
.stat-card .stat-icon { font-size:2rem; opacity:.7; }
.stat-card .stat-num { font-size:2rem; font-weight:700; }
.stat-card .stat-label { font-size:.8rem; opacity:.85; }
.stat-purple { background:linear-gradient(135deg,#6C3FC5,#9B59B6); }
.stat-gold   { background:linear-gradient(135deg,#D4AF37,#F0D060); color:#2d1b69 !important; }
.stat-teal   { background:linear-gradient(135deg,#11998e,#38ef7d); }
.stat-coral  { background:linear-gradient(135deg,#e96c4b,#f7971e); }

/* ── Tables ─────────────────────────────────────────────────── */
.ks-table { border-collapse:separate; border-spacing:0; width:100%; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(108,63,197,.07); }
.ks-table thead th { background:var(--bg); color:var(--text); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; padding:14px 16px; border-bottom:1px solid var(--border); }
.ks-table tbody td { padding:13px 16px; border-bottom:1px solid rgba(0,0,0,.04); font-size:.875rem; vertical-align:middle; }
.ks-table tbody tr:last-child td { border-bottom:none; }
.ks-table tbody tr:hover td { background:var(--bg); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control, .form-select { border:1.5px solid var(--border); border-radius:10px; padding:10px 14px; font-size:.9rem; transition:all .2s; }
.form-control:focus, .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,63,197,.12); }
.form-label { font-weight:500; font-size:.875rem; color:var(--text); margin-bottom:6px; }
.auth-card { max-width:480px; margin:60px auto; background:#fff; border-radius:20px; box-shadow:0 8px 40px rgba(108,63,197,.15); padding:40px; }
.auth-header { text-align:center; margin-bottom:32px; }
.auth-icon { width:64px; height:64px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); border-radius:16px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem; margin-bottom:16px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { border-radius:8px; font-weight:500; font-size:.75rem; padding:4px 10px; }

/* ── Footer ─────────────────────────────────────────────────── */
/* ── Footer ─────────────────────────────────────────────────── */
.ks-footer { background:linear-gradient(135deg,#1a0f3a,#2d1b69); color:rgba(255,255,255,.7); margin-top:auto; }
.ks-footer { --bs-secondary-color: #ffffff; }
.ks-footer .text-white { color:#fff !important; }
.ks-footer h6 { color:#fff; }
.ks-footer .border-secondary { border-color: rgba(255,255,255,.15) !important; }
.footer-links li { margin-bottom:8px; }
.footer-links a { color:#ffffff; font-size:.875rem; transition:color .2s; }
.footer-links a:hover { color:var(--accent); }
.social-icon { width:36px; height:36px; background:rgba(255,255,255,.08); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:.875rem; transition:all .2s; }
.social-icon:hover { background:var(--accent); color:#2d1b69; }

/* ── Salon Detail ───────────────────────────────────────────── */
.salon-hero { height:300px; object-fit:cover; border-radius:16px; width:100%; }
.salon-logo-lg { width:90px; height:90px; border-radius:16px; object-fit:cover; border:4px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,.1); }
.booking-panel { background:#fff; border-radius:16px; box-shadow:0 4px 24px rgba(108,63,197,.1); padding:24px; border:1px solid var(--border); position:sticky; top:90px; }

/* ── Misc ────────────────────────────────────────────────────── */
.section-title { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--text); }
.section-subtitle { color:var(--text-muted); font-size:1rem; }
.category-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; background:#fff; border:1.5px solid var(--border); font-size:.8rem; font-weight:500; cursor:pointer; transition:all .2s; }
.category-chip:hover, .category-chip.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.empty-state { text-align:center; padding:60px 20px; }
.empty-state i { font-size:3rem; color:var(--border); margin-bottom:16px; }
.empty-state h5 { color:var(--text-muted); }
.star-rating i { font-size:.85rem; }
.page-header { background:linear-gradient(135deg,#2d1b69,#6C3FC5); color:#fff; padding:40px 0; margin-bottom:32px; }
.page-header h1 { color:#fff; font-size:2rem; margin:0; }
.breadcrumb-item a { color:rgba(255,255,255,.7); }
.breadcrumb-item.active { color:rgba(255,255,255,.9); }
.breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.5); }
.panel-topbar { background:#fff; border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; justify-content:space-between; margin-left:var(--sidebar-w); position:sticky; top:70px; z-index:50; }

@media (max-width:768px) {
  .panel-sidebar { transform:translateX(-100%); }
  .panel-sidebar.open { transform:translateX(0); }
  .panel-content { margin-left:0; padding:16px; }
  .panel-topbar { margin-left:0; }
  .auth-card { margin:20px; padding:24px; }
}