/* =========================================================================
   PREMIUM THEME v2 — client color palette
   Terracotta #c7522a · Sandy Gold #e5c185 · Cream #fbf2c4 · Sage #74a892 · Deep Teal #008585
   Layered on top of AdminLTE without touching core view files.
   ========================================================================= */

:root{
  /* ---- palette (as supplied) ---- */
  --teal:           #008585;
  --teal-dark:      #005f5f;
  --teal-light:     #4fa3a3;
  --terracotta:     #c7522a;
  --terracotta-dark:#a34220;
  --terracotta-light:#dd7350;
  --gold:           #e5c185;
  --gold-dark:      #cda361;
  --cream:          #fbf2c4;
  --sage:           #74a892;
  --sage-dark:      #5a8a76;

  /* ---- neutrals derived for a warm, readable light theme ---- */
  --ink:            #2b2420;
  --text-primary:   #2b2420;
  --text-muted:     #6e6255;
  --text-faint:     #9c9182;

  --bg:             #fbf8f0;
  --surface:        #fffdf5;
  --surface-2:      #fdf8e9;
  --surface-3:      #f7edd1;
  --border:         #e6dcc2;
  --border-soft:    #efe7d1;

  /* ---- status ---- */
  --success:        var(--sage);
  --warning:        var(--gold-dark);
  --danger:         #c0392b;

  --radius:         14px;
  --radius-sm:      10px;
  --shadow-soft:    0 6px 22px rgba(43,36,32,0.08);
  --shadow-lift:    0 14px 36px rgba(43,36,32,0.14);
  --ease:           cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body, .content-wrapper, .wrapper{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text-primary);
}

h1,h2,h3,h4,h5,.box-title,.login-box-msg,.info-box-text,.small-box h3{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}

::selection{ background: var(--terracotta); color: #fff; }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.main-sidebar, .left-side, .wrapper, .skin-blue .main-sidebar, .skin-blue-light .main-sidebar{
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%) !important;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.sidebar-menu > li > a{
  color: rgba(255,255,255,0.78) !important;
  border-left: 3px solid transparent;
  transition: color .2s var(--ease), border-color .25s var(--ease), background .2s var(--ease);
  position: relative;
}
.sidebar-menu > li > a:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}
.sidebar-menu > li.active > a, .sidebar-menu > li.active > a:hover{
  background: rgba(199,82,42,0.22) !important;
  border-left-color: var(--terracotta);
  color: #ffffff !important;
}
.sidebar-menu > li.treeview.active > a { color: #ffffff !important; }
.sidebar-menu li > a > .fa, .sidebar-menu li > a > .ion, .sidebar-menu li > a > .glyphicon{
  transition: transform .2s var(--ease), color .2s var(--ease);
  width: 22px;
  color: rgba(255,255,255,0.85) !important;
}
/* The original template hardcodes utility classes like text-aqua, text-red,
   text-green, etc. directly on sidebar icons, assuming a dark charcoal
   sidebar. Our sidebar background is teal, so text-aqua (also teal) made
   icons nearly invisible against it. Force every sidebar icon to a visible
   color regardless of whichever text-* class it happens to carry. */
.sidebar-menu li > a > .fa[class*="text-"],
.sidebar-menu li > a > .ion[class*="text-"],
.sidebar-menu li > a > .glyphicon[class*="text-"]{
  color: rgba(255,255,255,0.85) !important;
}
.sidebar-menu > li > a:hover > .fa,
.sidebar-menu > li > a:hover > .ion{ transform: translateX(2px) scale(1.05); color: var(--gold) !important; }
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .ion{ color: #ffffff !important; }

.sidebar-menu .treeview-menu > li > a{ color: rgba(255,255,255,0.62) !important; }
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a{ color: #ffffff !important; }

.main-header .logo{
  background: var(--teal-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.main-header .logo .logo-lg b,
.main-header .logo .logo-mini b{
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pt-logo-mini-img{
  width: 34px; height: 34px; border-radius: 9px; display: inline-block; vertical-align: middle;
  background: var(--cream);
  padding: 3px;
  box-shadow: 0 0 0 2px rgba(251,242,196,0.85), 0 2px 6px rgba(0,0,0,0.25);
}

.main-header .navbar, body.skin-blue .main-header .navbar{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 2px 12px rgba(43,36,32,0.06);
}
.sidebar-menu > li > .treeview-menu, body.skin-blue .sidebar-menu > li > .treeview-menu{
  background: rgba(0,0,0,0.12) !important;
  margin: 0;
}
.main-header .navbar .nav > li > a{ color: var(--text-muted) !important; }
.main-header .navbar .nav > li > a:hover{ color: var(--terracotta) !important; background: var(--surface-2) !important; }
.main-header .sidebar-toggle{ color: var(--text-muted) !important; }
.main-header .sidebar-toggle:hover{ color: var(--terracotta) !important; }

.user-header{
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)) !important;
}

/* =========================================================================
   CONTENT / CARDS / BOXES
   ========================================================================= */
.content-wrapper, .right-side{ background: var(--bg) !important; }

.box, .small-box, .info-box, .panel{
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text-primary);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* NOTE: intentionally no entrance `animation` on cards. A persistent
   animation-name creates a new CSS stacking context on that element for as
   long as it's applied — and if a modal happens to be a DOM descendant of a
   .box (as on the POS payment modal), the modal gets trapped below its own
   backdrop, making it unclickable/unclosable. Confirmed and reproduced this
   exact failure on the POS page's Cash button. Not worth it for a cosmetic
   fade-in — see the same note on .modal-content below. */
/* Modals: styled like the cards above, but deliberately WITHOUT a persistent
   CSS `animation`. A non-none animation-name creates a new stacking context
   for as long as it's applied (even after the animation finishes), which
   traps Bootstrap's modal below its own backdrop and makes it unclickable.
   Bootstrap already animates modals via its own .fade/.in transition. */
.modal-content{
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lift) !important;
  color: var(--text-primary);
}
/* Round the header/footer edges directly rather than using
   `overflow: hidden` on .modal-content — that would clip any dropdown
   opened inside a modal (country/state pickers, etc.). */
.modal-header, .modal-header.header-custom{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.modal-footer{
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.box:hover{ box-shadow: var(--shadow-lift) !important; }
.box-header{ border-bottom: 1px solid var(--border-soft) !important; }
.box-header .box-title{ color: var(--ink) !important; font-weight: 700; }
.box-footer{ background: transparent !important; border-top: 1px solid var(--border-soft) !important; }

/* dashboard stat tiles */
.small-box{
  overflow: hidden;
  position: relative;
}
.small-box::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120px 80px at 100% 0%, rgba(199,82,42,0.08), transparent 70%);
  pointer-events:none;
}
.small-box > .inner{ position:relative; z-index:1; }
.small-box h3{ font-weight: 800; color: var(--ink); }
.small-box p{ color: var(--text-muted); }
.small-box .icon{ color: rgba(43,36,32,0.06) !important; transition: transform .3s var(--ease), color .3s var(--ease); }
.small-box:hover .icon{ transform: scale(1.08) rotate(-4deg); color: rgba(43,36,32,0.10) !important; }
.small-box > .small-box-footer{
  background: rgba(43,36,32,0.04) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-soft);
}
.small-box > .small-box-footer:hover{ color: var(--terracotta) !important; background: rgba(43,36,32,0.07) !important; }

/* re-tint the AdminLTE bg-* utility colors to the new palette (mapped, not removed) */
.bg-aqua, .bg-blue, .bg-light-blue{ background: linear-gradient(135deg, var(--teal-light), var(--teal)) !important; }
.bg-green{ background: linear-gradient(135deg, var(--sage), var(--sage-dark)) !important; }
.bg-yellow{ background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important; }
.bg-red{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; }
.bg-purple{ background: linear-gradient(135deg, var(--teal-dark), var(--ink)) !important; }

.info-box{ padding: 4px; background: var(--surface) !important; }
.info-box-icon{ border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.info-box-content{ color: var(--text-primary); }
.info-box-text{ color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.info-box-number{ color: var(--ink) !important; font-weight: 800; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{ border-radius: var(--radius-sm) !important; font-weight: 600; letter-spacing: .01em; transition: all .18s var(--ease) !important; border-width: 1px !important; }
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary, .btn-info{
  background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important;
  border-color: var(--terracotta-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(199,82,42,0.25);
}
.btn-primary:hover, .btn-info:hover{
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(199,82,42,0.35);
  transform: translateY(-1px);
}
.btn-success{ background: linear-gradient(135deg,var(--sage),var(--sage-dark)) !important; border-color:var(--sage-dark) !important; color:#fff !important; }
.btn-danger{ background: linear-gradient(135deg,#d9584a,var(--danger)) !important; border-color:#a5301f !important; color:#fff !important; }
.btn-warning{ background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important; border-color:var(--gold-dark) !important; color:#3a2e14 !important; }
.btn-default{
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.btn-default:hover{ background: var(--surface-3) !important; border-color: var(--terracotta) !important; color: var(--terracotta) !important; }

/* (ripple effect removed — see premium-theme.js for why) */

/* =========================================================================
   FORMS
   ========================================================================= */
.form-control{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control::placeholder{ color: var(--text-faint) !important; }
.form-control:focus{
  border-color: var(--terracotta) !important;
  box-shadow: 0 0 0 3px rgba(199,82,42,0.14) !important;
}
label{ color: var(--text-muted); font-weight: 600; }
.select2-container--default .select2-selection--single{
  background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important;
}

/* =========================================================================
   TABLES
   ========================================================================= */
.table, .dataTable{ color: var(--text-primary) !important; }
.table > thead > tr > th{
  color: var(--text-muted) !important;
  border-bottom: 2px solid var(--border) !important;
  text-transform: uppercase; font-size: 11px; letter-spacing: .05em; font-weight: 700;
  background: var(--surface-2);
}
.table > tbody > tr > td{ border-top: 1px solid var(--border-soft) !important; }
.table-hover > tbody > tr:hover{ background: var(--surface-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd){ background: rgba(43,36,32,0.015) !important; }
.box .table{ margin-bottom: 0; }

/* =========================================================================
   MODALS / DROPDOWNS
   ========================================================================= */
.modal-header{ border-bottom: 1px solid var(--border-soft) !important; }
.modal-footer{ border-top: 1px solid var(--border-soft) !important; }
.dropdown-menu{
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lift) !important; border-radius: var(--radius-sm) !important;
}
.dropdown-menu > li > a{ color: var(--text-muted) !important; }
.dropdown-menu > li > a:hover{ background: var(--surface-2) !important; color: var(--terracotta) !important; }

/* scrollbar */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--terracotta); }

/* loading shimmer (used by premium-theme.js on async widgets) */
.pt-skeleton{
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* =========================================================================
   ALERTS
   ========================================================================= */
.alert{
  position: relative;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-soft);
  padding: 16px 44px 16px 20px !important;
  margin-bottom: 20px;
}
.alert.alert-dismissable, .alert-dismissible{ padding-right: 44px !important; }
.alert .close{
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  font-size: 20px;
  line-height: 1;
}
.alert-success{ background: linear-gradient(135deg, rgba(116,168,146,0.20), rgba(116,168,146,0.08)) !important; border-color: rgba(116,168,146,0.45) !important; }
.alert-info{ background: linear-gradient(135deg, rgba(0,133,133,0.16), rgba(0,133,133,0.06)) !important; border-color: rgba(0,133,133,0.35) !important; }
.alert-warning{ background: linear-gradient(135deg, rgba(229,193,133,0.35), rgba(229,193,133,0.12)) !important; border-color: rgba(205,163,97,0.5) !important; }
.alert-danger{ background: linear-gradient(135deg, rgba(192,57,43,0.16), rgba(192,57,43,0.06)) !important; border-color: rgba(192,57,43,0.35) !important; }
.alert a{ color: var(--terracotta) !important; text-decoration: underline; }
.alert .close{ color: var(--text-primary) !important; opacity: .6; text-shadow: none !important; }
.alert .close:hover{ opacity: 1; }

/* =========================================================================
   LABELS / BADGES / STATUS PILLS
   ========================================================================= */
.label{ border-radius: 6px !important; font-weight: 600 !important; letter-spacing: .02em; padding: .3em .6em; }
.label-success{ background: linear-gradient(135deg,var(--sage),var(--sage-dark)) !important; color:#fff !important; }
.label-danger{ background: linear-gradient(135deg,#d9584a,var(--danger)) !important; color:#fff !important; }
.label-warning{ background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important; color:#3a2e14 !important; }
.label-info{ background: linear-gradient(135deg, var(--teal-light), var(--teal)) !important; color:#fff !important; }
.label-primary{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; color:#fff !important; }
.label-default{ background: var(--surface-3) !important; color: var(--text-muted) !important; }
.badge{ background: var(--terracotta) !important; color:#fff !important; border-radius: 20px !important; font-weight: 700; }

/* =========================================================================
   PANELS / WELLS / CALLOUTS
   ========================================================================= */
.panel{ background: var(--surface) !important; }
.panel-default > .panel-heading{ background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--border-soft) !important; }
.well{ background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-primary); box-shadow: none !important; }
.callout{ background: var(--surface-2) !important; border-color: var(--teal) !important; color: var(--text-primary); }
.callout.callout-info{ border-color: var(--teal) !important; background: rgba(0,133,133,0.08) !important; color: var(--text-primary) !important; }
.callout.callout-danger{ border-color: var(--danger) !important; background: rgba(192,57,43,0.08) !important; color: var(--text-primary) !important; }
.callout.callout-warning{ border-color: var(--gold-dark) !important; background: rgba(205,163,97,0.12) !important; color: var(--text-primary) !important; }
.callout.callout-success{ border-color: var(--sage-dark) !important; background: rgba(116,168,146,0.12) !important; color: var(--text-primary) !important; }
.callout h4, .callout p{ color: var(--text-primary) !important; }
.callout a{ color: var(--terracotta) !important; font-weight: 600; }

/* modal headers (Add Customer, Add Item, etc.) used the old theme's
   teal-to-blue gradient — switched to cream to match the rest of the app */
.header-custom{
  background: var(--cream) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border);
}
.header-custom .modal-title{ color: var(--ink) !important; }
.header-custom .close{ color: var(--ink) !important; opacity: 0.6; text-shadow: none !important; }
.header-custom .close:hover{ opacity: 1; color: var(--terracotta) !important; }

/* =========================================================================
   TABS / PILLS / BREADCRUMBS / PAGINATION
   ========================================================================= */
.nav-tabs{ border-bottom-color: var(--border) !important; }
.nav-tabs > li > a{ color: var(--text-muted) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; }
.nav-tabs > li > a:hover{ background: var(--surface-2) !important; border-color: var(--border-soft) !important; color: var(--terracotta) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
  background: var(--surface) !important; color: var(--terracotta) !important; border-color: var(--border) var(--border) transparent !important;
}
.nav-pills > li.active > a{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; color:#fff !important; }

/* .nav-tabs-custom — a distinct AdminLTE widget (used on Settings pages
   like SMS API / Site Settings), separate from generic .nav-tabs/.box */
.nav-tabs-custom{
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-soft);
}
.nav-tabs-custom > .nav-tabs{ border-bottom-color: var(--border) !important; }
.nav-tabs-custom > .nav-tabs > li.header{ color: var(--text-muted) !important; }
.nav-tabs-custom > .nav-tabs > li > a{ color: var(--text-muted) !important; background: transparent !important; }
.nav-tabs-custom > .nav-tabs > li > a:hover{ color: var(--terracotta) !important; }
.nav-tabs-custom > .nav-tabs > li.active{ border-top-color: var(--terracotta) !important; }
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a{
  background: var(--surface) !important;
  color: var(--terracotta) !important;
  border-left-color: var(--border) !important;
  border-right-color: var(--border) !important;
}
.nav-tabs-custom > .tab-content{
  background: var(--surface) !important;
  border-radius: 0 0 var(--radius) var(--radius);
}
.breadcrumb{ background: transparent !important; color: var(--text-muted); }
.breadcrumb > li + li::before{ color: var(--text-faint); }
.breadcrumb > .active{ color: var(--text-primary); }
.pagination > li > a, .pagination > li > span{ background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important; }
.pagination > li > a:hover{ background: var(--surface-2) !important; color: var(--terracotta) !important; }
.pagination > .active > a, .pagination > .active > span{ background: var(--terracotta) !important; border-color: var(--terracotta-dark) !important; color:#fff !important; }

/* =========================================================================
   TOOLTIPS / POPOVERS / PROGRESS
   ========================================================================= */
.tooltip-inner{ background: var(--ink) !important; color: #fff !important; }
.tooltip.top .tooltip-arrow{ border-top-color: var(--ink) !important; }
.tooltip.bottom .tooltip-arrow{ border-bottom-color: var(--ink) !important; }
.popover{ background: var(--surface) !important; border-color: var(--border) !important; }
.popover-title{ background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--border-soft) !important; }
.progress{ background: var(--surface-3) !important; box-shadow: none !important; }
.progress-bar{ background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)) !important; }

/* text-* utility colors kept legible on the light surface */
.text-muted{ color: var(--text-faint) !important; }
.text-blue{ color: var(--teal) !important; }
.text-green{ color: var(--sage-dark) !important; }
.text-red{ color: var(--danger) !important; }
.text-yellow, .text-warning{ color: var(--gold-dark) !important; }
.text-aqua{ color: var(--teal) !important; }

/* =========================================================================
   ROUNDED CORNERS EVERYWHERE — commonly-missed square elements
   ========================================================================= */
.input-group-addon{
  border-radius: var(--radius-sm) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.input-group .form-control:first-child,
.input-group-addon:first-child{ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:last-child,
.input-group-addon:last-child{ border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.img-circle, .user-image, .direct-chat-img, .table img.img-circle{ border-radius: 50% !important; }
.thumbnail, .box img, img.product-image, .item-img{ border-radius: var(--radius-sm) !important; overflow: hidden; }

/* iCheck custom checkboxes/radios */
.icheckbox_square-blue, .iradio_square-blue,
.icheckbox_minimal, .iradio_minimal{ border-radius: 5px !important; overflow: hidden; }
.icheckbox_square-blue.checked, .iradio_square-blue.checked{ border-radius: 5px !important; }

.progress{ border-radius: 20px !important; overflow: hidden; }
.progress-bar{ border-radius: 20px !important; }

.well{ border-radius: var(--radius) !important; }
.panel{ border-radius: var(--radius) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{ border-radius: var(--radius-sm) !important; }
/* NOTE: deliberately NO `overflow: hidden` on tables, panels, wells or the
   user menu. Those containers hold dropdown menus (row "Action" menus, the
   header profile menu), and clipping their overflow makes those menus
   invisible. Round the visual edges via border-radius on the first/last
   cells instead. */
table.dataTable{ border-radius: var(--radius-sm); }
table.dataTable thead tr th:first-child{ border-top-left-radius: var(--radius-sm); }
table.dataTable thead tr th:last-child{ border-top-right-radius: var(--radius-sm); }

.navbar-custom-menu .dropdown-menu{ border-radius: var(--radius) !important; }
.tooltip-inner, .popover{ border-radius: var(--radius-sm) !important; }
.select2-container--default .select2-selection--single,
.select2-dropdown{ border-radius: var(--radius-sm) !important; }

/* footer credit link */
.main-footer{ color: var(--text-muted); background: var(--surface) !important; border-top: 1px solid var(--border-soft); }
.pt-footer-credit{
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.pt-footer-credit:hover, .pt-footer-credit:focus{
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
  text-decoration: none;
}

/* =========================================================================
   HEADER STORE NAME — long names must not overflow or break the header
   The sidebar header is a fixed width, so a long store name used to spill
   out of it. Shrink + ellipsis as a CSS safety net; premium-theme.js also
   scales the font down to fit where possible.
   ========================================================================= */
.main-header .logo{
  padding: 0 10px;
  overflow: hidden;
}
.main-header .logo .logo-lg{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.main-header .logo .logo-lg b{
  font-size: clamp(13px, 1.5vw, 20px);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/* Very long store names can't fit on one line even at the smallest
   readable size. premium-theme.js adds this class to wrap onto two lines
   (the header is 50px tall, so two short lines fit) before finally
   falling back to an ellipsis. */
.main-header .logo .logo-lg.pt-name-2line{ white-space: normal; }
.main-header .logo .logo-lg.pt-name-2line b{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.15;
  max-height: 2.3em;
  text-align: center;
}

/* =========================================================================
   MOBILE / RESPONSIVE
   ========================================================================= */

/* DataTables "Responsive" hides columns on small screens (including the
   Action column) and exposes them via a small "+" control. By default that
   control is 14px and default-blue — easy to miss and hard to tap, which
   makes the row actions look like they've disappeared. Make it big,
   on-brand and obviously tappable. */
table.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dtr-inline.collapsed > tbody > tr > th:first-child:before{
  width: 22px !important;
  height: 22px !important;
  line-height: 21px !important;
  border-radius: 50% !important;
  background-color: var(--terracotta) !important;
  border: 0 !important;
  box-shadow: 0 2px 5px rgba(199,82,42,0.4) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: center !important;
  top: 50% !important;
  margin-top: -11px !important;
  left: 6px !important;
}
table.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before{
  background-color: var(--sage-dark) !important;
  box-shadow: 0 2px 5px rgba(90,138,118,0.4) !important;
}
table.dtr-inline.collapsed > tbody > tr > td:first-child{
  padding-left: 36px !important;
  cursor: pointer;
}
/* the expanded child row holds the action buttons — give it room */
table.dataTable > tbody > tr.child ul.dtr-details{ width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li{
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  overflow: visible;
}
/* NOTE: this used to force position:static on the Action button's
   .btn-group/.dropdown here. That's what broke the menu: Bootstrap's
   .dropdown-menu is position:absolute and anchors to the nearest
   positioned ancestor, which is normally this .btn-group. Forcing it to
   static removed that anchor, so the opened menu was positioned against
   some unrelated ancestor further up the page instead of the button -
   which is why it showed up in the wrong place / didn't show at all on
   phones. Keep the default relative positioning instead, and just make
   sure nothing on the row clips the menu once it opens. */
table.dataTable > tbody > tr.child{ overflow: visible; }
table.dataTable > tbody > tr.child td{ overflow: visible; }
table.dataTable > tbody > tr.child .btn-group,
table.dataTable > tbody > tr.child .dropdown{ position: relative; }
table.dataTable > tbody > tr.child .dropdown-menu{ z-index: 1051; }

/* Bootstrap's own .table-responsive sets overflow-x:auto + overflow-y:hidden
   (needed so wide tables scroll sideways instead of breaking the page), but
   that combination silently clips any Action dropdown that opens inside it -
   on any screen size, but it's most noticeable on phones where there's less
   room to begin with. Per the CSS spec you can't just set overflow-y:visible
   while overflow-x stays auto (the visible value gets forced to auto), so
   the JS in code_js.php toggles this class to lift overflow on BOTH axes
   only while a dropdown inside is actually open, then restores normal
   scrolling once it closes. */
.table-responsive.dropdown-open{ overflow: visible !important; }

@media (max-width: 767px){
  /* never let a wide table push the whole page sideways */
  body, .wrapper{ overflow-x: hidden; }
  .content-wrapper, .right-side{ overflow-x: hidden; }
  .box-body{ padding: 10px; }
  .content{ padding: 10px 8px; }

  /* comfortable tap targets */
  .btn{ min-height: 40px; }
  .btn-group > .btn{ min-height: 40px; }
  .sidebar-menu > li > a{ padding: 13px 15px; }

  /* 16px prevents iOS Safari from auto-zooming when focusing an input */
  .form-control, input[type="text"], input[type="number"],
  input[type="email"], input[type="password"], select, textarea{
    font-size: 16px !important;
  }

  /* modals should use the screen, not float in a tiny box */
  .modal-dialog{ margin: 8px; width: auto !important; }
  .modal-body{ padding: 14px; }
  .modal-content{ border-radius: var(--radius) !important; }

  /* dropdown menus inside tables can otherwise run off-screen */
  .table .dropdown-menu, table.dataTable .dropdown-menu{
    right: 0; left: auto;
    max-width: calc(100vw - 40px);
  }

  /* DataTables controls stack instead of squeezing */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length{ float: none; text-align: left; margin-bottom: 8px; }
  .dataTables_wrapper .dataTables_filter input{ width: 100%; margin-left: 0; }
  .dataTables_wrapper .dt-buttons{ float: none; margin-bottom: 8px; }

  /* dashboard tiles full width so figures aren't cramped */
  .small-box h3{ font-size: 26px; }
  .info-box-number{ font-size: 20px; }

  /* header store name gets less room on phones */
  .main-header .logo .logo-lg b{ font-size: clamp(12px, 4vw, 17px); }
}

@media (max-width: 420px){
  .box-header .btn-group{ float: none !important; display: flex; flex-wrap: wrap; gap: 4px; }
  .box-header .btn-group > .btn{ flex: 1 1 auto; border-radius: var(--radius-sm) !important; }
  .content-header > h1{ font-size: 20px; }
}