/*
  License Panel UI — Grow CRM inspired theme layer
  ------------------------------------------------
  - Designed to sit on top of Bootstrap 5.
  - Dark/Light is controlled by: body[data-theme="dark|light"].
  - Both Admin and Customer panels import this file.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  /* Typography */
  --lp-font: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --lp-font-size: 14px;
  --lp-h1-size: 36px;
  --lp-h2-size: 32px;
  --lp-h3-size: 28px;
  --lp-h4-size: 24px;
  --lp-h5-size: 20px;
  --lp-h6-size: 16px;

  /* Radii */
  --lp-radius: 14px;
  --lp-radius-sm: 10px;

  /* Brand / state colors (Dark default, Grow-like) */
  --lp-primary: #398bf7;          /* Grow dark theme color */
  --lp-primary-rgb: 57, 139, 247;
  --lp-info: #20aee3;             /* Grow info color */
  --lp-info-rgb: 32, 174, 227;
  --lp-success: #24d2b5;
  --lp-warning: #ff9041;
  --lp-danger: #ff5c6c;

  /* Surfaces (Dark) */
  --lp-body-bg: #0f131a;
  --lp-surface: #161b22;
  --lp-surface-2: #1f2630;
  --lp-card-bg: #161b22;
  --lp-sidebar-bg: #242a33;
  --lp-topbar-bg: #161b22;
  --lp-border: rgba(255,255,255,.08);

  /* Text (Dark) */
  --lp-text: #e6edf3;
  --lp-heading: #ffffff;
  --lp-muted: rgba(230,237,243,.65);

  /* Effects */
  --lp-shadow-sm: 0 8px 22px rgba(0,0,0,.25);
  --lp-shadow-md: 0 18px 45px rgba(0,0,0,.35);
  --lp-ring: 0 0 0 .25rem rgba(var(--lp-primary-rgb), .18);

  /* Derived */
  --lp-primary-06: rgba(var(--lp-primary-rgb), .06);
  --lp-primary-10: rgba(var(--lp-primary-rgb), .10);
  --lp-primary-14: rgba(var(--lp-primary-rgb), .14);
  --lp-primary-18: rgba(var(--lp-primary-rgb), .18);
  --lp-primary-28: rgba(var(--lp-primary-rgb), .28);
}

/* Light mode (Grow variable.scss inspired) */
body[data-theme="light"]{
  /* Cloudflare-like light sidebar / UI palette */
  --lp-primary: #f38020;
  --lp-primary-rgb: 243, 128, 32;

  --lp-body-bg: #f6f7f9;
  --lp-surface: #ffffff;
  --lp-surface-2: #f3f4f6;
  --lp-card-bg: #ffffff;
  --lp-sidebar-bg: #ffffff;
  --lp-topbar-bg: #ffffff;
  --lp-border: #e5e7eb;

  --lp-text: #374151;
  --lp-heading: #111827;
  --lp-muted: #6b7280;

  /* Sidebar states */
  --lp-sb-hover: #f2f2f2;
  --lp-sb-active: #f2f2f2;
  --lp-sb-icon: #6b7280;

  --lp-shadow-sm: 0 8px 24px rgba(17,24,39,.08);
  --lp-shadow-md: 0 18px 55px rgba(17,24,39,.14);
  --lp-ring: 0 0 0 .25rem rgba(var(--lp-primary-rgb), .20);
}

*{box-sizing:border-box;}

html,body{height:100%;}

body{
  background: var(--lp-body-bg);
  color: var(--lp-text);
  font-family: var(--lp-font);
  font-size: var(--lp-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global scrollbar: clean + minimal */
:root{
  --lp-scrollbar-size: 9px;
  --lp-scrollbar-track: transparent;
  --lp-scrollbar-thumb: rgba(148,163,184,.34);
  --lp-scrollbar-thumb-hover: rgba(148,163,184,.52);
}

body[data-theme="light"]{
  --lp-scrollbar-thumb: rgba(100,116,139,.32);
  --lp-scrollbar-thumb-hover: rgba(71,85,105,.46);
}

*{
  scrollbar-width: thin;
  scrollbar-color: var(--lp-scrollbar-thumb) var(--lp-scrollbar-track);
}

*::-webkit-scrollbar{
  width: var(--lp-scrollbar-size);
  height: var(--lp-scrollbar-size);
}

*::-webkit-scrollbar-track{
  background: var(--lp-scrollbar-track);
}

*::-webkit-scrollbar-thumb{
  background-color: var(--lp-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  min-height: 28px;
}

*::-webkit-scrollbar-thumb:hover{
  background-color: var(--lp-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner{
  background: transparent;
}

/* Smoothness */
.btn,
.card,
.lp-card,
.nav-link,
.lp-customer-link,
.dropdown-menu,
.form-control,
.form-select,
.input-group-text,
.table,
.alert{
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

a{color: var(--lp-link, var(--lp-primary)); text-decoration:none;}
a:hover{color: var(--lp-link-hover, rgba(var(--lp-primary-rgb), .85));}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color: var(--lp-heading); font-weight: 700;}

/* Typography scale (overrideable from Settings -> Style -> Typography) */
h1,.h1{font-size: var(--lp-h1-size);} 
h2,.h2{font-size: var(--lp-h2-size);} 
h3,.h3{font-size: var(--lp-h3-size);} 
h4,.h4{font-size: var(--lp-h4-size);} 
h5,.h5{font-size: var(--lp-h5-size);} 
h6,.h6{font-size: var(--lp-h6-size);} 

.lp-muted{color: var(--lp-muted) !important;}
.min-w-0{min-width:0;}

/* Cards */
.card,
.lp-card,
.lp-customer-card,
.lp-card-soft{
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}

body[data-theme="dark"] .card,
body:not([data-theme="light"]) .card,
body[data-theme="dark"] .lp-card,
body[data-theme="dark"] .lp-customer-card{
  box-shadow: none;
}

.card-header{background: transparent; border-bottom: 1px solid var(--lp-border);}

/* Buttons (Grow-ish) */
.btn{border-radius: var(--lp-radius-sm); font-weight: 600;}

.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lp-primary);
  --bs-btn-border-color: var(--lp-primary);
  --bs-btn-hover-bg: rgba(var(--lp-primary-rgb), .90);
  --bs-btn-hover-border-color: rgba(var(--lp-primary-rgb), .90);
  --bs-btn-active-bg: rgba(var(--lp-primary-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--lp-primary-rgb), .85);
  box-shadow: 0 10px 22px rgba(var(--lp-primary-rgb), .18);
}

.btn-primary:hover{transform: translateY(-1px);}

.btn-outline-secondary{
  --bs-btn-color: var(--lp-text);
  --bs-btn-border-color: var(--lp-border);
  --bs-btn-hover-bg: var(--lp-primary-06);
  --bs-btn-hover-border-color: rgba(var(--lp-primary-rgb), .35);
  --bs-btn-hover-color: var(--lp-text);
}

.btn-outline-primary{
  --bs-btn-color: var(--lp-primary);
  --bs-btn-border-color: rgba(var(--lp-primary-rgb), .55);
  --bs-btn-hover-bg: var(--lp-primary);
  --bs-btn-hover-border-color: var(--lp-primary);
  --bs-btn-hover-color: #fff;
}

.btn-danger{
  --bs-btn-bg: var(--lp-danger);
  --bs-btn-border-color: var(--lp-danger);
  box-shadow: 0 10px 22px rgba(255,92,108,.18);
}

.btn-success{ --bs-btn-bg: var(--lp-success); --bs-btn-border-color: var(--lp-success); }
.btn-warning{ --bs-btn-bg: var(--lp-warning); --bs-btn-border-color: var(--lp-warning); }

.btn-sm{padding: .35rem .6rem; border-radius: 9px; font-weight: 600;}

/* Forms */
.form-control,
.form-select,
.input-group-text{
  background: var(--lp-surface-2) !important;
  border: 1px solid var(--lp-border) !important;
  color: var(--lp-text) !important;
  border-radius: var(--lp-radius-sm);
}

body[data-theme="light"] .form-control,
body[data-theme="light"] .form-select,
body[data-theme="light"] .input-group-text{
  background: #fff !important;
}

.form-control::placeholder{color: rgba(230,237,243,.45);}
body[data-theme="light"] .form-control::placeholder{color: rgba(82,96,102,.55);}

.form-control:focus,
.form-select:focus{
  border-color: rgba(var(--lp-primary-rgb), .55) !important;
  box-shadow: var(--lp-ring) !important;
}

/* Dropdown */
.dropdown-menu{
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  box-shadow: var(--lp-shadow-md);
}

body[data-theme="dark"] .dropdown-menu,
body:not([data-theme="light"]) .dropdown-menu{
  box-shadow: none;
}

.dropdown-item{padding: .55rem 1rem; color: var(--lp-text);}
.dropdown-item:hover{background: var(--lp-primary-06); color: var(--lp-text);}

/* Alerts */
.alert{border-radius: 12px; border: 1px solid var(--lp-border);}
body[data-theme="light"] .alert{border-color: rgba(82,96,102,.12);}

/* Badges */
.badge{border-radius: 999px; font-weight: 700; letter-spacing: .01em;}

/* Tables (Grow-ish) */
.table{color: var(--lp-text);}
.table thead th{
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-muted);
  border-bottom: 1px solid var(--lp-border);
  padding: 14px 16px;
  white-space: nowrap;
}

.table tbody td{
  border-top: 1px solid var(--lp-border);
  padding: 8px 16px;
  vertical-align: middle;
}

.table-hover tbody tr:hover > *{
  background: var(--lp-primary-06);
}

.table-responsive{border-radius: var(--lp-radius); overflow:hidden;}

/* Tabs (profile pages) */
.nav-tabs{border-bottom: 1px solid var(--lp-border);}
.nav-tabs .nav-link{color: var(--lp-muted); border: 0; border-bottom: 2px solid transparent; padding: .85rem 1rem; font-weight: 700;}
.nav-tabs .nav-link:hover{color: var(--lp-text); background: transparent;}
.nav-tabs .nav-link.active{color: var(--lp-primary); border-bottom-color: var(--lp-primary); background: transparent;}

/* Avatars (admin + customer dropdown) */
.lp-user-avatar{width:22px;height:22px;border-radius:8px;object-fit:cover;display:inline-block;border:1px solid var(--lp-border);vertical-align:middle;}
.lp-user-avatar-fallback{width:22px;height:22px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--lp-border);background: var(--lp-surface-2);margin-right:8px;vertical-align:middle;}
.lp-user-avatar-fallback i{font-size:14px;}
.lp-user-avatar-lg{width:40px;height:40px;border-radius:12px;object-fit:cover;display:inline-block;border:1px solid var(--lp-border);}
.lp-initials-avatar{
  width:22px;
  height:22px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.5px;
  margin-right:8px;
  vertical-align:middle;
  user-select:none;
  background: var(--lp-avatar-bg, linear-gradient(135deg,#0ea5e9,#22c55e));
}
.lp-initials-avatar-lg{
  width:40px;
  height:40px;
  border-radius:12px;
  font-size:14px;
  margin-right:0;
}
.lp-initials-avatar-xl{
  width:56px;
  height:56px;
  border-radius:16px;
  font-size:16px;
  margin-right:0;
}
.lp-user-name{max-width: 180px; display:inline-block; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lp-user-dropdown{
  min-width:280px;
  /*
    Bootstrap dropdowns are positioned via an inline
    `transform: translate3d(x, y, 0)`.
    If we override `transform` here, the dropdown loses its positioning and
    can overlap the topbar.

    Keep spacing with margin only; DO NOT set `transform` on the dropdown.
  */
  margin-top: 10px; /* language picker ile aynı hizada */
  border-radius: 14px;
}

/* Profile avatar upload UI (admin + customer) */
.lp-avatar-upload{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.lp-avatar-preview{
  width: 120px;
  height: 120px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--lp-border);
  background: var(--lp-surface-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-avatar-preview img{width:100%; height:100%; object-fit:cover; display:block;}
.lp-profile-avatar-fallback{width:100%; height:100%; display:inline-flex; align-items:center; justify-content:center; color: var(--lp-muted); font-size: 26px;}

/* Avatar remove button (integrated X at top-right) */
.lp-img-remove{position:absolute; top:8px; right:8px;}
.lp-img-remove-btn{
  width:26px;
  height:26px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.lp-img-remove-btn:hover{background: rgba(0,0,0,.60);}

.lp-actions{display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end;}
.lp-icon-btn{width:24px; height:24px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius: 12px;}

/* Login / auth pages */
.lp-login-bg{min-height:100vh; display:block;}

.lp-login-card{
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-border);
  border-radius: 18px;
  box-shadow: var(--lp-shadow-md);
}

body[data-theme="dark"] .lp-login-card,
body:not([data-theme="light"]) .lp-login-card{
  box-shadow: none;
}

.lp-login-mark,
.lp-brand-mark,
.lp-customer-mark{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-primary);
  flex: 0 0 auto;
  margin-bottom: 22px;
}

.lp-login-mark i,
.lp-brand-mark i,
.lp-customer-mark i{font-size: 20px; line-height: 1;}

/* Toasts (admin) */
.lp-toast-container{
  position: fixed;
  right: 18px;
  top: auto;
  bottom: 18px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.lp-toast{
  pointer-events: auto;
  border-radius: 14px;
  border: 1px solid var(--lp-border);
  background: var(--lp-surface);
  box-shadow: var(--lp-shadow-md);
  min-width: 320px;
  max-width: 420px;
  overflow: hidden;
}

body[data-theme="dark"] .lp-toast,
body:not([data-theme="light"]) .lp-toast{
  box-shadow: none;
}

.lp-toast-body{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
}

.lp-toast-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lp-border);
  background: var(--lp-surface-2);
  flex: 0 0 auto;
}

.lp-toast-icon i{font-size: 18px; line-height: 1;}

.lp-toast-text{font-weight: 700; line-height: 1.25; padding-top: 7px;}

.lp-toast-close{margin-left: auto; margin-top: 2px; filter: invert(1) grayscale(1); opacity: .75;}
body[data-theme="light"] .lp-toast-close{filter: none;}

.lp-toast-success .lp-toast-icon{background: rgba(36,210,181,.12); border-color: rgba(36,210,181,.30);} 
.lp-toast-warning .lp-toast-icon{background: rgba(255,144,65,.12); border-color: rgba(255,144,65,.30);} 
.lp-toast-error .lp-toast-icon{background: rgba(255,92,108,.12); border-color: rgba(255,92,108,.30);} 
.lp-toast-info .lp-toast-icon{background: rgba(var(--lp-info-rgb), .12); border-color: rgba(var(--lp-info-rgb), .30);} 

/* -------------------------------------------------------------------------
   TABLES — remove border radius everywhere (Grow-like)
   ------------------------------------------------------------------------- */
.table-responsive,
.lp-card .table-responsive,
.lp-customer-card .table-responsive{
  border-radius: 0 !important;
}


/* Global: tables should be square (Grow) */
.table-responsive,
.table,
table{
  border-radius: 0 !important;
}


/* Topbar: theme switch + spacing */
.lp-topbar-actions{ gap: 16px !important; }

/* Theme switch (Dribbble-style) */
.lp-theme-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:34px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--lp-text);
  text-decoration:none;
  border-radius:999px;
  -webkit-tap-highlight-color: transparent;
}

.lp-theme-switch:focus,
.lp-theme-switch:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

.lp-theme-switch:hover{
  background:transparent;
}

.lp-theme-switch-track{
  position:relative;
  width:52px;
  height:28px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.32);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease;
}

/* Sliding highlight (matches the dribbble motion feel) */
.lp-theme-switch-track::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--lp-primary-rgb), .18);
  transform: translateX(-55%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}

.lp-theme-switch.is-dark .lp-theme-switch-track::before{
  transform: translateX(55%);
}

body[data-theme="light"] .lp-theme-switch-track{
  background:rgba(0,0,0,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

.lp-theme-switch-icon{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  font-size:13px;
  line-height:1;
  opacity:.75;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

.lp-theme-switch-icon-sun{ left: 9px; }
.lp-theme-switch-icon-moon{ right: 9px; }

.lp-theme-switch-knob{
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}

.lp-theme-switch.is-dark .lp-theme-switch-knob{ transform: translateX(24px); }

/* Icon emphasis follows the active side */
.lp-theme-switch.is-light .lp-theme-switch-icon-moon{
  opacity:.95;
  transform: translateY(-50%) scale(1.05);
}

.lp-theme-switch.is-dark .lp-theme-switch-icon-sun{
  opacity:.95;
  transform: translateY(-50%) scale(1.05);
}

.lp-theme-switch.is-dark .lp-theme-switch-icon-moon,
.lp-theme-switch.is-light .lp-theme-switch-icon-sun{
  opacity:.55;
}