/* SMS PK theme: one tone (slate grey), light bars, Inter at compact sizes.
   Loaded last from layouts/head-tags so it overrides the base template.
   Green/red/amber are kept only for status meaning (success, danger, warning). */
:root {
  --pk-tone: #334155;        /* buttons, links, active menu */
  --pk-tone-dark: #1E293B;   /* hover */
  --pk-tone-light: #F1F5F9;  /* highlights, hover rows, table heads */
  --pk-bg: #F8FAFC;          /* page background */
  --pk-surface: #FFFFFF;     /* bars, cards */
  --pk-text: #1E293B;
  --pk-muted: #64748B;
  --pk-border: #E2E8F0;
  --pk-green: #16A34A;
  --pk-red: #DC2626;
  --pk-amber: #D97706;
  --pk-radius: 6px;
  --pk-btn: #000000;         /* all buttons: black, white text */
  --pk-btn-hover: #1F2937;
}

/* Typography: smaller, narrower than the old Poppins/42px headings */
body, h1, h2, h3, h4, h5, h6, .btn, input, select, textarea, .popover, .tooltip, .dropdown-menu {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body { font-size: 13px; line-height: 1.5; color: var(--pk-text); background-color: var(--pk-bg); }
h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 17px; } h4 { font-size: 15px; } h5 { font-size: 13px; } h6 { font-size: 12px; }
h1, h2, h3, h4, h5, h6 { color: var(--pk-text); font-weight: 600; }
.btn, .form-control, .table, .dropdown-menu, .panel, .nav, .pagination, .alert { font-size: 13px; }
small, .small, .help-block { font-size: 12px; }
a { color: var(--pk-tone); }
a:hover, a:focus { color: var(--pk-tone-dark); }
.text-primary { color: var(--pk-tone) !important; }
.text-muted { color: var(--pk-muted) !important; }
.text-success, .text-warning, .text-info { color: var(--pk-tone) !important; }

/* Content area */
#page-container { background: var(--pk-surface); }
#page-content, #wrap { background: var(--pk-bg); }
#page-heading { background: var(--pk-bg); }
#page-heading h1 { font-size: 20px; font-weight: 600; line-height: 28px; padding: 16px 20px; color: var(--pk-text); }
#page-heading .breadcrumb { padding: 16px 20px 0; background: transparent; font-size: 12px; }
.breadcrumb > .active { color: var(--pk-muted); }

/* Top bar: light */
.navbar-inverse, header.navbar-inverse {
  background-color: var(--pk-surface) !important; border-color: var(--pk-border) !important;
  box-shadow: 0 1px 0 var(--pk-border) !important;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: var(--pk-border); }
header.navbar-inverse a, header.navbar-inverse i, .navbar-inverse .navbar-nav > li > a { color: var(--pk-text) !important; }
header .dropdown-menu a { color: var(--pk-text) !important; }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a:focus { background-color: var(--pk-tone-light) !important; }
header .toolbar .dropdown, header #headerbardropdown, header #rightmenu-trigger { border-left: 1px solid var(--pk-border) !important; }
header #leftmenu-trigger { border-right: 1px solid var(--pk-border) !important; }
header a.hasnotifications { color: var(--pk-tone) !important; }
.navbar-brand { background: url("../img/smspk-logo.svg") no-repeat center center; background-size: contain; width: 110px; }
@media (max-width: 480px) { ul.toolbar { background-color: var(--pk-surface); } }

/* Side menu: light */
#page-leftbar { background: var(--pk-surface); box-shadow: inset -1px 0 0 var(--pk-border); }
#sidebar { font-size: 13px; }
#sidebar ul, #sidebar ul li a { background: var(--pk-surface); color: var(--pk-muted); box-shadow: none; }
#sidebar li a { color: var(--pk-text); padding: 9px 12px; }
#sidebar i { color: var(--pk-muted); }
#sidebar a:hover { background-color: var(--pk-tone-light); color: var(--pk-tone-dark); box-shadow: none; }
#sidebar a:hover i { color: var(--pk-tone-dark); }
#sidebar li.open > a { background-color: var(--pk-tone-light); color: var(--pk-tone-dark); box-shadow: none; }
#sidebar > li.active > a, #sidebar > li.active > a:hover { background: var(--pk-tone); color: #fff; box-shadow: none; }
#sidebar li.active i, #sidebar > li.active > a i, #sidebar li.active a:hover i { color: #fff; }
#sidebar ul li.active:not(.open) > a { color: var(--pk-tone-dark); font-weight: 600; }
#sidebar ul li.active:not(.open) > a i { color: var(--pk-tone-dark); }
#sidebar .divider, #sidebar .divider:hover { background-color: var(--pk-border); box-shadow: none; }
#sidebar .badge, #sidebar .badge.badge-primary { background-color: var(--pk-tone); color: #fff; }

/* Buttons: every type is black with white text */
.btn { border-radius: var(--pk-radius); font-weight: 500; }
.btn:not(.btn-link), button[type="submit"]:not(.btn):not(.close), input[type="submit"]:not(.btn), input[type="button"]:not(.btn) {
  background-color: var(--pk-btn) !important; border: 1px solid var(--pk-btn) !important; color: #fff !important;
}
button[type="submit"]:not(.btn):not(.close), input[type="submit"]:not(.btn), input[type="button"]:not(.btn) { border-radius: var(--pk-radius); padding: 6px 14px; }
.btn:not(.btn-link) i, .btn:not(.btn-link) .caret { color: #fff !important; border-top-color: #fff; }
.btn:not(.btn-link):hover, .btn:not(.btn-link):focus, .btn:not(.btn-link):active, .btn:not(.btn-link).active, .open > .dropdown-toggle.btn,
button[type="submit"]:not(.btn):not(.close):hover, input[type="submit"]:not(.btn):hover, input[type="button"]:not(.btn):hover {
  background-color: var(--pk-btn-hover) !important; border-color: var(--pk-btn-hover) !important; color: #fff !important;
}
.btn[disabled], .btn.disabled { opacity: .5; }

/* Panels / cards: every colour variant becomes the same white card */
.panel { border-radius: 8px; border: 1px solid var(--pk-border) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.panel > .panel-heading {
  background: var(--pk-surface) !important; color: var(--pk-text) !important;
  border-bottom: 1px solid var(--pk-border) !important; border-radius: 8px 8px 0 0;
}
.panel > .panel-heading h4, .panel > .panel-heading h3, .panel > .panel-heading .options a,
.panel > .panel-heading a, .panel > .panel-heading i { color: var(--pk-text) !important; font-size: 14px; }
.panel .panel-body { border-top-color: var(--pk-border) !important; }

/* Dashboard tiles: one tone instead of orange/green/blue blocks */
.info-tiles, .info-tiles:hover { background: var(--pk-surface) !important; color: var(--pk-text) !important; border: 1px solid var(--pk-border) !important; border-radius: 8px; overflow: hidden; }
.info-tiles .tiles-heading, .info-tiles:hover .tiles-heading { background: var(--pk-tone-light) !important; color: var(--pk-muted) !important; font-size: 12px; font-weight: 600; }
.info-tiles .tiles-body, .info-tiles .tiles-body-alt, .info-tiles:hover .tiles-body, .info-tiles:hover .tiles-body-alt {
  background: var(--pk-surface) !important; color: var(--pk-text) !important; font-size: 22px !important; font-weight: 600;
}
.info-tiles .tiles-body > i { font-size: 22px !important; }
.info-tiles i, .info-tiles:hover i, .info-tiles .tiles-heading .pull-right, .info-tiles:hover .tiles-heading .pull-right { color: var(--pk-muted) !important; }
.info-tiles .tiles-body div + small, .info-tiles .tiles-body-alt small { font-size: 12px; font-weight: 400; color: var(--pk-muted); }
.info-tiles .tiles-footer, .info-tiles:hover .tiles-footer, .info-tiles .tiles-footer:hover {
  background: var(--pk-surface) !important; color: var(--pk-tone) !important; border-top: 1px solid var(--pk-border); font-size: 12px;
}

/* Tables */
.table > thead > tr > th { background: var(--pk-tone-light); color: var(--pk-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.table-hover > tbody > tr:hover > td { background-color: var(--pk-tone-light); }

/* Labels, badges, progress, pagination, tabs, dropdowns */
.label-primary, .label-info, .label-inverse, .badge-primary, .bg-primary, .progress-bar, .progress-bar-primary, .progress-bar-inverse { background-color: var(--pk-tone); }
.label-success { background-color: var(--pk-green); }
.label-danger { background-color: var(--pk-red); }
.label-warning { background-color: var(--pk-amber); }
.pagination > li > a, .pagination > li > span { color: var(--pk-tone); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus { background-color: var(--pk-tone); border-color: var(--pk-tone); color: #fff; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-top: 2px solid var(--pk-tone); color: var(--pk-text); }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { border-color: var(--pk-tone); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: var(--pk-tone); }

/* Forms */
.form-control { border-radius: var(--pk-radius); border-color: #CBD5E1; box-shadow: none; }
.form-control:focus { border-color: var(--pk-tone); box-shadow: 0 0 0 3px rgba(51, 65, 85, .12); }

/* Alerts / banners: one tone for every type (info, success, warning, danger) */
.alert, .alert-info, .alert-success, .alert-warning, .alert-danger, .alert.success, .alert.error {
  background-color: var(--pk-tone-light) !important; color: var(--pk-text) !important;
  border: 1px solid var(--pk-border) !important; border-left: 3px solid var(--pk-tone) !important;
  border-radius: var(--pk-radius); padding: 12px 16px;
}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert p, .alert strong, .alert b { color: var(--pk-text) !important; }
.alert h3, .alert h4 { font-size: 15px; margin: 0 0 6px; }
.alert hr { border-top-color: var(--pk-border) !important; }
.alert .alert-link, .alert a { color: var(--pk-tone-dark) !important; font-weight: 600; text-decoration: underline; }
.alert .close { color: var(--pk-muted); opacity: .8; text-shadow: none; }

/* Popups (SweetAlert2): slate buttons instead of the default blue/red */
.swal2-popup { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; border-radius: 10px; }
.swal2-title { font-size: 18px !important; color: var(--pk-text) !important; }
.swal2-styled.swal2-confirm { background-color: var(--pk-btn) !important; color: #fff !important; border-radius: var(--pk-radius) !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel, .swal2-styled.swal2-deny, .sweet-alert button.cancel { background-color: var(--pk-btn) !important; color: #fff !important; border-radius: var(--pk-radius) !important; box-shadow: none !important; }
/* Popup icons (success / error / warning / info / question) all in slate */
.swal2-icon, .swal2-icon.swal2-success, .swal2-icon.swal2-error, .swal2-icon.swal2-warning,
.swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--pk-tone) !important; color: var(--pk-tone) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(51, 65, 85, .3) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"], .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--pk-tone) !important; }
/* Same for the older SweetAlert v1 stylesheet, if any page uses it */
.sweet-alert .sa-icon.sa-success, .sweet-alert .sa-icon.sa-error, .sweet-alert .sa-icon.sa-warning, .sweet-alert .sa-icon.sa-info { border-color: var(--pk-tone) !important; }
.sweet-alert .sa-icon.sa-success .sa-placeholder { border-color: rgba(51, 65, 85, .3) !important; }
.sweet-alert .sa-icon .sa-line, .sweet-alert .sa-icon.sa-warning .sa-body, .sweet-alert .sa-icon.sa-warning .sa-dot,
.sweet-alert .sa-icon.sa-info::before, .sweet-alert .sa-icon.sa-info::after { background-color: var(--pk-tone) !important; }
.sweet-alert button.confirm { background-color: var(--pk-btn) !important; color: #fff !important; box-shadow: none !important; }

/* Footer */
footer { background: var(--pk-surface); border-top: 1px solid var(--pk-border); color: var(--pk-muted); font-size: 12px; }

/* Close (×) buttons everywhere: alerts, modals, popups */
.close, .swal2-close { font-size: 20px; font-weight: 400; line-height: 1; color: var(--pk-muted) !important; opacity: .8; text-shadow: none; }
.close:hover, .close:focus, .swal2-close:hover, .swal2-close:focus { color: var(--pk-text) !important; opacity: 1; box-shadow: none; }
.alert-dismissable .close { position: relative; top: -2px; right: -6px; }
.modal-header .close { margin-top: -2px; }

/* Login / signup / forgot password: light grey with a faint slate dot grid (the old rotating images are hidden) */
body.focusedform, .focusedform #background {
  background-color: var(--pk-tone-light) !important;
  background-image: radial-gradient(rgba(51, 65, 85, .16) 1px, transparent 1.2px) !important;
  background-size: 18px 18px !important; background-attachment: fixed;
}
.focusedform .verticalcenter {
  position: relative !important; top: auto !important; left: auto !important;
  margin: 48px auto !important; width: 400px; max-width: calc(100% - 32px);
}
.focusedform .verticalcenter.pk-wide { width: 720px; }
.focusedform .brand { width: 180px !important; padding-bottom: 20px !important; }
.focusedform .brand, .focusedform .brand a { color: var(--pk-text); font-weight: 700; }
.focusedform .panel { width: 100% !important; border-radius: 10px; border: 1px solid var(--pk-border) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.focusedform .panel-body { padding: 24px; }
.focusedform .panel-body > h4 { font-size: 18px; font-weight: 600; margin-bottom: 20px !important; }
.focusedform .form-group { margin-bottom: 14px; }
.focusedform .form-control { height: 40px; font-size: 13px; background: #fff; }
.focusedform .input-group { width: 100%; }
.focusedform .input-group-addon {
  width: 42px; background: var(--pk-tone-light); border-color: #CBD5E1; color: var(--pk-muted);
  border-radius: var(--pk-radius) 0 0 var(--pk-radius);
}
.focusedform .input-group .form-control { border-radius: 0 var(--pk-radius) var(--pk-radius) 0; }
.focusedform .input-group:focus-within .input-group-addon { border-color: var(--pk-tone); color: var(--pk-tone); }
.focusedform input[type="password"] { padding-right: 40px; }
.focusedform .toggle-eye, .focusedform .eye-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 5; color: var(--pk-muted);
}
.focusedform .toggle-eye:hover, .focusedform .eye-toggle:hover { color: var(--pk-text); }
.focusedform small, .focusedform .block { color: var(--pk-muted); font-size: 12px; }
.focusedform .panel-footer { background: transparent; border-top: 1px solid var(--pk-border); padding: 14px 0 0; margin-top: 6px; }
@media (max-width: 767px) {
  .focusedform .verticalcenter { margin: 24px auto !important; }
  .focusedform .pk-2col > [class*="col-"] + [class*="col-"] { margin-top: 14px; }
}
.focusedform .panel-heading, .focusedform .panel-primary > .panel-heading { background-color: var(--pk-tone) !important; border-color: var(--pk-tone) !important; color: #fff !important; }
.focusedform .panel-heading h4, .focusedform .panel-heading h3 { color: #fff !important; }