html, body { height: 100%; }
:root{
  --adtrak-primary:#6070B0;
  --adtrak-accent:#80C0E0;
  --adtrak-ink:#111111;
  --adtrak-muted:#6b7280;
  --adtrak-bg:#ffffff;
  --adtrak-card:#ffffff;
  --adtrak-border:#e5e7eb;
}

body{
  background: var(--adtrak-bg);
  color: var(--adtrak-ink);
}

.brand-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 0;
}
.brand-bar img{ height:38px; width:auto; }
.brand-title{ font-weight:700; letter-spacing:.2px; }

.card.adtrak-card{
  border:1px solid var(--adtrak-border);
  border-radius:16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

.btn-adtrak{
  background: var(--adtrak-primary);
  border-color: var(--adtrak-primary);
}
.btn-adtrak:hover{ filter:brightness(.95); }

.link-adtrak{ color: var(--adtrak-primary); text-decoration:none; font-weight:600; }
.link-adtrak:hover{ text-decoration:underline; }

.badge-adtrak{
  background: rgba(96,112,176,.12);
  color: var(--adtrak-primary);
  border:1px solid rgba(96,112,176,.22);
}

.form-control:focus, .form-select:focus{
  border-color: rgba(96,112,176,.55);
  box-shadow: 0 0 0 .25rem rgba(96,112,176,.15);
}

.small-muted{ color: var(--adtrak-muted); }

.top-accent{
  height:6px;
  background: linear-gradient(90deg, var(--adtrak-primary), var(--adtrak-accent));
  border-radius: 999px;
}

.alert-soft{
  border-radius:12px;
  border:1px solid var(--adtrak-border);
  background:#fff;
}

/*
  IMPORTANT:
  Never override Bootstrap's .container globally.
  The previous version forced .container into a flex-centered box, which broke
  desktop layout (tiny centered cards) and mobile flow.
*/

/* Use these on auth pages only */
.page-center{
  min-height: calc(100vh - 110px);
  display:flex;
  align-items:center;
}

.auth-card{
  padding: 30px;
}

@media (max-width: 576px){
  .auth-card{ padding: 18px; }
}

/* Subscriptions (mobile) */
@media (max-width: 576px){
  .dash-card{ padding:16px !important; }

  /* Cycle + payment selectors */
  .btn-group.w-100{ flex-direction: column; }
  .btn-group.w-100 .btn{ width:100%; border-radius:12px !important; }
  .btn-group.w-100 .btn + .btn{ margin-top:10px; }

  /* Keep card contents from looking cramped */
  .card.p-4{ padding:16px !important; }
}

/* ===== Auth pages ===== */
body.auth-page .app-main{ margin-left:0 !important; }
body.auth-page .app-content-header{ display:none; }
body.auth-page .app-footer{ display:none; }

body.auth-page{
  /* Fullscreen background image (replace files in /assets/img/ if desired) */
  background-image: url('/assets/img/login-bg-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 992px){
  body.auth-page{ background-image: url('/assets/img/login-bg-tablet.jpg'); }
}
@media (max-width: 576px){
  body.auth-page{ background-image: url('/assets/img/login-bg-mobile.jpg'); }
}

body.auth-page::before{
  content:'';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  pointer-events:none;
  z-index:0;
}
body.auth-page .app-wrapper{ position: relative; z-index: 1; }

body.auth-page .app-content > .container-fluid{
  min-height: calc(100vh - 56px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 32px 16px;
}

/* Desktop: push the login card to the right so the image stands out */
@media (min-width: 992px){
  body.auth-page .app-content > .container-fluid{
    justify-content:flex-end !important;
    padding-right: 72px;
    padding-left: 72px;
  }
}

body.auth-page .auth-wrap{ width:100%; max-width: 420px; }
body.auth-page #logincard{ padding: 30px; }
body.auth-page #logincard2{ padding: 20px; }

/* ===== AdminLTE polish ===== */
.app-sidebar .nav-sidebar .nav-link{
  border-radius: 10px;
  margin: 2px 8px;
}
.app-sidebar .nav-sidebar .nav-link .nav-icon{
  font-size: 1.05rem;
}
.app-sidebar .nav-header{
  letter-spacing: .08em;
  opacity: .75;
  padding-left: 14px;
}

/* Plan description (subscriptions) */
.plan-desc{
  max-height: 220px;
  overflow: auto;
}
.plan-desc p{ margin: 0 0 .65rem 0; }
.plan-desc ul, .plan-desc ol{ margin: 0 0 .65rem 1.25rem; }


/* Logo sizing overrides (prevents huge logos) */
.brand-image,
.app-sidebar .brand-image{
  max-height: 32px !important;
  width: auto !important;
}
.brand-link .brand-text{
  font-size: 1rem;
}


/* Ticket status/priority badges */

.ticket-badge{
  display:inline-block;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .75rem;
  line-height: 1.1;
  letter-spacing: .02em;
  vertical-align: middle;
  color: #fff;
  white-space: nowrap;
}
.ticket-status-open{ background:#dc3545 !important; }      /* red */
.ticket-status-pending{ background:#ffc107 !important; color:#111 !important; } /* yellow */
.ticket-status-solved{ background:#0dcaf0 !important; color:#111 !important; }  /* cyan */
.ticket-status-closed{ background:#198754 !important; }   /* green */
.ticket-priority-low{ background:#6c757d !important; }    /* gray */
.ticket-priority-normal{ background:#0d6efd !important; } /* blue */
.ticket-priority-high{ background:#fd7e14 !important; }   /* orange */
.ticket-priority-urgent{ background:#6f42c1 !important; } /* purple */

/* Ticket pill badges (support + admin) */
.ticket-badge{
  display:inline-block;
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* Priority colors */
.ticket-priority-urgent{ background: rgba(220,53,69,.18) !important; color:#dc3545; border:1px solid rgba(220,53,69,.35); }
.ticket-priority-high  { background: rgba(255,193,7,.22) !important; color:#8a6d00; border:1px solid rgba(255,193,7,.45); }
.ticket-priority-normal{ background: rgba(13,110,253,.12) !important; color:#0d6efd; border:1px solid rgba(13,110,253,.30); }
.ticket-priority-low   { background: rgba(25,135,84,.14) !important; color:#198754; border:1px solid rgba(25,135,84,.30); }

/* Status colors */
.ticket-status-open   { background: rgba(25,135,84,.14) !important; color:#198754; border:1px solid rgba(25,135,84,.30); }
.ticket-status-pending{ background: rgba(255,193,7,.22) !important; color:#8a6d00; border:1px solid rgba(255,193,7,.45); }
.ticket-status-solved { background: rgba(13,110,253,.12) !important; color:#0d6efd; border:1px solid rgba(13,110,253,.30); }
.ticket-status-closed { background: rgba(108,117,125,.16) !important; color:#6c757d; border:1px solid rgba(108,117,125,.30); }

.gridjs-search-input{
    color:#000000 !important;
}

/* FORCE Grid.js search input text color */
.gridjs .gridjs-search input.gridjs-search-input,
.gridjs .gridjs-search input[type="search"].gridjs-search-input {
  color: #000 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #000 !important;
}

/* Placeholder */
.gridjs .gridjs-search input.gridjs-search-input::placeholder {
  color: #6c757d !important;
  opacity: 1;
}

/* Focus */
.gridjs .gridjs-search input.gridjs-search-input:focus {
  color: #000 !important;
  background-color: #fff !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25) !important;
}

/* Grid.js row priority highlighting (apply to cells) */
.gridjs .gridjs-tr.ticket-row-priority-urgent .gridjs-td{ background: rgba(111,66,193,.14) !important; }
.gridjs .gridjs-tr.ticket-row-priority-high   .gridjs-td{ background: rgba(253,126,20,.16) !important; }
.gridjs .gridjs-tr.ticket-row-priority-normal .gridjs-td{ background: rgba(13,110,253,.10) !important; }
.gridjs .gridjs-tr.ticket-row-priority-low    .gridjs-td{ background: rgba(25,135,84,.10) !important; }

/*
    custom colors for admin
*/

.app-sidebar,
.main-sidebar {
    background-color: #f1f1f1 !important;
}

/* Default link color */
.app-sidebar .nav-link,
.main-sidebar .nav-link {
    color: #343434 !important; 
}

/* Icons */
.app-sidebar .nav-icon,
.main-sidebar .nav-icon {
    color: #343434 !important;
}

.main-header,
.app-header {
    background-color: #f1f1f1 !important;
    border-bottom: 0 !important;
}

.sidebar-brand {
    border:0 !important;    
}

.shadow {
  box-shadow: unset !important;
}

.content-wrapper,
.app-main {
    border-radius: 20px;
    margin: 20px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

body,
.app-wrapper {
    background-color: #f1f1f1 !important;
}

.app-footer {
  color: #343434 !important;
  background-color: #f1f1f1 !important;
}

/*
.app-header .nav-link[data-lte-toggle="sidebar"] {
    display: none;
}


body.sidebar-collapsed 
.app-header .nav-link[data-lte-toggle="sidebar"] {
    display: block !important;
}
*/

/* hide hamburger when sidebar is NOT collapsed */
.app-header .navbar-nav .nav-link[data-lte-toggle="sidebar"]{
  display: none !important;
}

/* show hamburger only when collapsed (AdminLTE toggles one of these) */
body.sidebar-collapse .app-header .navbar-nav .nav-link[data-lte-toggle="sidebar"],
body.sidebar-collapsed .app-header .navbar-nav .nav-link[data-lte-toggle="sidebar"]{
  display: inline-flex !important;
  align-items: center;
}

/* increase size */
.app-header .navbar-nav .nav-link[data-lte-toggle="sidebar"] i{
  font-size: 1.9rem !important;
  line-height: 1;
}

#ticketBellBadge {
  background-color: #0365dd !important;
  top: -4px !important;
  margin-left: -9px !important;
  padding: 0.25em 0.55em !important;
}

.app-footer{
    border:0 !important;
}

/* Grid.js header background */
.gridjs-th {
    background-color: #80b1ed !important;
    color: #ffffff !important;
    border-color: #80b1ed !important;
}

/* Optional: remove default light gray strip */
.gridjs thead {
    background-color: #80b1ed !important;
}

.gridjs-th {
    font-weight: 600;
}

/* Hover row background */
.gridjs-tr:hover {
    background-color: #0d6efd !important;
}

/* Make text readable on red */
.gridjs-tr:hover td {
    color: #ffffff !important;
}