/* ============================================================
   SMARTTLYHOST — Blesta Client Template Override Stylesheet
   ------------------------------------------------------------
   This file is loaded AFTER Blesta's default Bootstrap styles
   in structure.pdt, so every rule here wins by cascade.
   Built for the latest Blesta (Bootstrap 4 base).

   Inspired by one.com / Allure: clean, airy, rounded cards,
   confident accent colour, generous whitespace.

   SAFE ON UPDATES: lives in your own theme folder, never edits
   core files. Only structure.pdt references it.
   ============================================================ */

/* ----------  1. DESIGN TOKENS  ----------
   SmartlyHost brand: red (#CA201F) + near-black (#2B2B2B),
   extracted directly from the official logo. */
:root {
  /* Brand */
  --st-primary:        #ca201f;   /* SmartlyHost red */
  --st-primary-600:    #b01a19;
  --st-primary-700:    #8f1413;
  --st-primary-soft:   #fdeceb;   /* tinted backgrounds */
  --st-accent:         #2b2b2b;   /* brand black secondary */
  --st-btn:            #1f1f1f;   /* buttons = brand black (softer than red) */
  --st-btn-600:        #000000;   /* button hover */
  --st-info:           #0ea5e9;   /* calm sky-blue for informational notices */
  --st-info-bg:        #f0f9ff;   /* info notice background */
  --st-info-ink:       #075985;   /* info notice text */
  --st-success:        #16a34a;
  --st-warning:        #f59e0b;
  --st-danger:         #dc2626;

  /* Neutrals */
  --st-ink:            #1f1f1f;   /* near-black text (logo black) */
  --st-body:           #555555;   /* body grey */
  --st-muted:          #9a9a9a;
  --st-line:           #ececec;   /* hairline borders */
  --st-surface:        #ffffff;
  --st-bg:             #f7f7f8;   /* page background */
  --st-bg-2:           #efeff1;

  /* Shape & depth */
  --st-radius:         16px;
  --st-radius-sm:      10px;
  --st-radius-lg:      22px;
  --st-shadow-sm:      0 1px 2px rgba(15,23,42,.05);
  --st-shadow:         0 4px 20px rgba(15,23,42,.06);
  --st-shadow-lg:      0 18px 50px rgba(15,23,42,.10);

  /* Type */
  --st-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
}

/* ----------  2. BASE  ---------- */
body {
  background: var(--st-bg) !important;
  color: var(--st-body);
  font-family: var(--st-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------  2b. FULL-WIDTH LAYOUT  ----------
   Navbar and content share the same wide max-width with a small
   comfort margin on the sides, so the design feels spacious and
   edge-aligned (one.com style) instead of boxed-in. */
.navbar > .container,
.container-md,
body.st-app .container {
  max-width: 1560px !important;     /* wide but not infinite */
  width: 100%;
  padding-left: 2.5rem !important;  /* comfort margin */
  padding-right: 2.5rem !important;
  margin-left: auto;
  margin-right: auto;
}
/* Footer aligns to the same width */
.st-footer .container {
  max-width: 1560px !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
@media (max-width: 768px) {
  .navbar > .container,
  .container-md,
  body.st-app .container,
  .st-footer .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--st-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--st-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--st-primary-700); text-decoration: none; }

hr { border-color: var(--st-line); opacity: 1; }

/* ----------  3. TOP NAVBAR  ---------- */
.navbar,
nav.navbar {
  background: var(--st-surface) !important;
  border-bottom: 1px solid var(--st-line);
  box-shadow: var(--st-shadow-sm);
  min-height: 64px;
  padding: 0 1.25rem;
}
.navbar .container { display: flex; align-items: center; flex-wrap: nowrap; }
.navbar .navbar-brand img { max-height: 34px; width: auto; }
.navbar .logo {
  display: flex;
  align-items: center;
  padding: .5rem 0;
  margin-right: 3.5rem;       /* generous gap so the menu never touches the logo */
  flex: 0 0 auto;
  position: static !important;  /* override any absolute positioning from base */
}
.navbar .logo img { max-height: 36px; width: auto; }
.navbar .navbar-collapse { flex: 1 1 auto; }
/* extra breathing room before the first menu item */
.navbar .navbar-nav:first-child { padding-left: .5rem; }
.st-auth__logo { max-height: 44px; width: auto; }

/* Modern, airy primary navigation */
.navbar .navbar-nav { align-items: center; gap: .25rem; }
.navbar .nav-link,
.navbar .navbar-nav > li > a {
  position: relative;
  color: var(--st-body) !important;
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--st-radius-sm);
  padding: .6rem 1rem !important;
  margin: 0 .15rem;
  transition: color .18s ease, background .18s ease;
}
/* Animated underline that grows from the center */
.navbar .nav-link::after,
.navbar .navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: .35rem;
  width: 0; height: 2px;
  background: var(--st-primary);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .22s cubic-bezier(.16,.84,.44,1);
}
.navbar .nav-link:hover,
.navbar .navbar-nav > li > a:hover {
  color: var(--st-primary) !important;
  background: transparent;
}
.navbar .nav-link:hover::after,
.navbar .navbar-nav > li > a:hover::after { width: calc(100% - 2rem); }

/* Active item: red text, soft pill, full underline */
.navbar .navbar-nav > li.active > a,
.navbar .nav-item.active .nav-link {
  color: var(--st-primary) !important;
  background: var(--st-primary-soft);
}
.navbar .navbar-nav > li.active > a::after,
.navbar .nav-item.active .nav-link::after { width: calc(100% - 2rem); }

/* Dropdown carets keep a little gap from the label */
.navbar .dropdown-toggle::before { margin-right: .15rem; }

/* User dropdown chip (account menu, pushed to the right) */
.navbar .navbar-nav.ml-auto,
.navbar .navbar-nav:last-child { margin-left: auto; }
.navbar .dropdown-toggle.nav-link {
  background: var(--st-bg-2);
  border-radius: 999px;
  padding: .5rem 1.1rem !important;
}
.navbar .dropdown-toggle.nav-link::after { display: none; }

/* Dropdown menus: clean card look */
.navbar .dropdown-menu {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-lg);
  padding: .4rem;
  margin-top: .5rem;
}
.navbar .dropdown-menu .dropdown-item {
  border-radius: var(--st-radius-sm);
  padding: .55rem .8rem;
  font-weight: 500;
  color: var(--st-body);
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: var(--st-primary-soft);
  color: var(--st-primary);
}

/* ----------  4. CARDS / PANELS  ---------- */
.card,
.panel,
.well {
  background: var(--st-surface);
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-radius) !important;
  box-shadow: var(--st-shadow);
  overflow: hidden;
}
.card + .card,
.panel + .panel { margin-top: 1.25rem; }

.card-header,
.panel-heading {
  background: var(--st-surface) !important;
  border-bottom: 1px solid var(--st-line) !important;
  color: var(--st-ink) !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 1.1rem 1.35rem;
}
.card-body,
.panel-body { padding: 1.35rem; }

.card-footer,
.panel-footer {
  background: var(--st-bg) !important;
  border-top: 1px solid var(--st-line) !important;
}

/* ----------  5. BUTTONS  ---------- */
.btn {
  border-radius: var(--st-radius-sm);
  font-weight: 600;
  padding: .6rem 1.25rem;
  border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--st-btn);
  border-color: var(--st-btn);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--st-btn-600);
  border-color: var(--st-btn-600);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.26);
}

.btn-secondary,
.btn-default {
  background: var(--st-surface);
  border-color: var(--st-line);
  color: var(--st-ink);
}
.btn-secondary:hover,
.btn-default:hover {
  background: var(--st-bg-2);
  border-color: var(--st-muted);
  color: var(--st-ink);
}

.btn-success { background: var(--st-success); border-color: var(--st-success); }
.btn-danger  { background: var(--st-danger);  border-color: var(--st-danger); }
.btn-warning { background: var(--st-warning); border-color: var(--st-warning); color:#fff; }

.btn-outline-primary {
  border-color: var(--st-primary);
  color: var(--st-primary);
}
.btn-outline-primary:hover {
  background: var(--st-primary);
  color: #fff;
}

.btn-lg { padding: .85rem 1.75rem; font-size: 1.05rem; }
.btn-sm { padding: .35rem .8rem; }

/* ----------  6. FORMS  ---------- */
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  padding: .65rem .9rem;
  color: var(--st-ink);
  background: var(--st-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Ensure dropdowns have enough height to show their value/options trigger */
select,
.custom-select,
select.form-control {
  min-height: 44px;
  height: auto;
  line-height: 1.4;
  appearance: auto;
}
.form-control:focus,
select:focus,
textarea:focus {
  border-color: var(--st-primary);
  box-shadow: 0 0 0 4px rgba(202,32,31,.12);
  outline: none;
}
label { color: var(--st-ink); font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.form-text, .text-muted { color: var(--st-muted) !important; }

/* ----------  7. TABLES  ---------- */
.table {
  background: var(--st-surface);
  border-radius: var(--st-radius);
  overflow: hidden;
}
.table thead th {
  background: var(--st-bg);
  color: var(--st-muted);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  font-weight: 700;
  border-bottom: 1px solid var(--st-line) !important;
  border-top: none !important;
  padding: .9rem 1rem;
}
.table tbody td {
  padding: .9rem 1rem;
  border-top: 1px solid var(--st-line) !important;
  vertical-align: middle;
  color: var(--st-body);
}
.table tbody tr:hover { background: var(--st-primary-soft); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(246,248,251,.6); }

/* ----------  8. BADGES / LABELS / STATUS  ---------- */
.badge, .label {
  border-radius: 999px;
  font-weight: 600;
  padding: .35em .7em;
  font-size: .75rem;
}
.badge-success, .label-success, .text-success { color: var(--st-success) !important; }
.badge-success, .label-success { background: rgba(22,163,74,.12); color: var(--st-success) !important; }
.badge-danger,  .label-danger  { background: rgba(220,38,38,.12);  color: var(--st-danger)  !important; }
.badge-warning, .label-warning { background: rgba(245,158,11,.15); color: #b45309 !important; }
.badge-info,    .label-info    { background: var(--st-primary-soft); color: var(--st-primary) !important; }

/* ----------  9. ALERTS  ---------- */
.alert {
  border: none;
  border-radius: var(--st-radius-sm);
  border-left: 4px solid var(--st-info);   /* default = informational, not alarming */
  padding: 1rem 1.25rem;
  box-shadow: var(--st-shadow-sm);
}
.alert-success { background: rgba(22,163,74,.08);  border-left-color: var(--st-success); color:#14532d; }
/* Red reserved for genuine errors only */
.alert-danger,
.alert-error   { background: rgba(220,38,38,.08);  border-left-color: var(--st-danger);  color:#7f1d1d; }
.alert-warning { background: rgba(245,158,11,.10); border-left-color: var(--st-warning); color:#78350f; }
/* Informational notices: calm sky-blue */
.alert-info    { background: var(--st-info-bg); border-left-color: var(--st-info); color: var(--st-info-ink); }

/* Blesta's "empty state" notices (no invoices, no contacts, etc.) often
   render as info/message boxes with a coloured left border. Make sure
   those neutral notices use the calm blue, never red. */
.message-box,
.message_box,
.empty,
.no-results,
.alert:not(.alert-danger):not(.alert-error):not(.alert-success):not(.alert-warning) {
  background: var(--st-info-bg);
  border-left-color: var(--st-info);
  color: var(--st-info-ink);
}

/* ----------  10. LEFT / SECONDARY NAV (client area)  ---------- */
.list-group { border-radius: var(--st-radius); overflow: hidden; }
.list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--st-line) !important;
  padding: .85rem 1.1rem;
  color: var(--st-body);
  font-weight: 500;
  background: var(--st-surface);
}
.list-group-item:last-child { border-bottom: none !important; }
.list-group-item.active,
.list-group-item.left-nav.active {
  background: var(--st-primary-soft) !important;
  color: var(--st-primary) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--st-primary);
}
.list-group-item:hover { background: var(--st-bg); }

/* ----------  11. DASHBOARD WIDGETS  ---------- */
.dashboard .card,
.widget {
  border-radius: var(--st-radius) !important;
}
.box, .box-round {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow);
}

/* Stat tiles helper (used by structure.pdt header strip) */
.st-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.st-stat {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--st-shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.st-stat__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--st-primary-soft);
  color: var(--st-primary);
  font-size: 1.2rem;
  flex: none;
}
.st-stat__label { font-size: .8rem; color: var(--st-muted); margin: 0; }
.st-stat__value { font-size: 1.5rem; font-weight: 800; color: var(--st-ink); margin: 0; line-height: 1.1; }

/* ----------  12. PAGINATION / TABS  ---------- */
.pagination .page-link {
  border: 1px solid var(--st-line);
  color: var(--st-body);
  border-radius: var(--st-radius-sm) !important;
  margin: 0 3px;
}
.pagination .page-item.active .page-link {
  background: var(--st-primary);
  border-color: var(--st-primary);
}
.nav-tabs { border-bottom: 1px solid var(--st-line); }
.nav-tabs .nav-link {
  border: none;
  color: var(--st-body);
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active {
  color: var(--st-primary);
  background: transparent;
  border-bottom: 2px solid var(--st-primary);
}

/* ----------  13. FOOTER  ---------- */
.footer, .st-footer {
  color: var(--st-muted);
  font-size: .85rem;
  margin-top: 3.5rem;          /* space between content and footer */
  padding: 2.5rem 0 0;         /* inner top padding */
}
.st-footer .container { padding-top: 1rem; padding-bottom: 1.5rem; }
.st-footer h6 { margin-bottom: 1rem; margin-top: .25rem; }
.st-footer li { list-style: none; padding: .3rem 0; }
.st-footer ul { padding-left: 0; }
.st-footer a { color: rgba(255,255,255,.7); }
.st-footer a:hover { color: #fff; }
/* Push footer to bottom when content is short (sticky footer) */
body.st-app { display: flex; flex-direction: column; min-height: 100vh; }
body.st-app .footer, body.st-app .st-footer { margin-top: auto; }

/* ----------  14. UTILITIES  ---------- */
.text-primary { color: var(--st-primary) !important; }
.bg-primary   { background: var(--st-primary) !important; }
.shadow-soft  { box-shadow: var(--st-shadow); }
.rounded-xl   { border-radius: var(--st-radius); }

/* ----------  15. RESPONSIVE  ---------- */
@media (max-width: 767px) {
  .card-body, .panel-body { padding: 1.1rem; }
  .st-stat__value { font-size: 1.25rem; }
}