/* ============================================
   Cable Manager - UI Enhancements
   For Maximum User & Admin Satisfaction
   ============================================ */

/* ============================================
   Enhanced Typography & Spacing
   ============================================ */

/* Pure black against the warm off-white background of this interface is
   the one colour on screen that belongs to no other element. Using the
   darkest ink of the palette instead keeps the heading dominant without
   it looking pasted on from somewhere else. */
h1 {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 8px !important;
}

h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.5px !important;
}

h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.3px !important;
}

h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}

/* ============================================
   Enhanced Stat Cards
   ============================================ */

.stat-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
  box-shadow: var(--shadow-light) !important;
}

/* The accent down a stat card's left edge.
 *
 * Every stat card is also a .card, and .card - further down this file -
 * claims its entire border with !important. A rule naming .stat-card alone
 * ties with it on specificity and loses on order, so the five-pixel accent
 * this block was always meant to draw never appeared: every stat card got
 * the same 1px grey edge as any other card. Naming both classes outranks it.
 *
 * On the money screens and the staff dashboard the colour carries meaning -
 * red for what went out or is overdue, amber for what is waiting on somebody
 * - so it is a modifier here and the markup only names it. */
.card.stat-card          { border-left: 5px solid var(--primary) !important; }
.card.stat-card--danger  { border-left-color: var(--danger) !important; }
.card.stat-card--success { border-left-color: var(--success) !important; }
.card.stat-card--warning { border-left-color: var(--warning) !important; }

/* A six pixel jump on hover is a lot of movement for a card that is only
   being pointed at, and on a dashboard of them the whole grid twitches as
   the cursor crosses it. One pixel and a slightly deeper shadow reads as
   the same lift without the flinch. */
.stat-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Only a card whose accent means nothing in particular picks up the green on
   hover. Turning a red "Total Expenses" card green because the cursor passed
   over it contradicts the one thing its colour was there to say. */
.card.stat-card:not([class*="stat-card--"]):hover {
  border-left-color: var(--success) !important;
}

/* A 120px disc of pale green sat in the corner of every card, large enough
   to crowd the figure it shared the space with and saying nothing. Kept,
   but small and faint - a hint of colour on the corner rather than a shape
   competing with the number. */
.stat-card::before {
  width: 64px !important;
  height: 64px !important;
  background-color: rgba(45, 95, 63, 0.05) !important;
}

.stat-value {
  font-size: 42px !important;
  font-weight: 900 !important;
  color: var(--primary) !important;
  letter-spacing: -1.5px !important;
  margin-bottom: 12px !important;
}

.stat-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.stat-change {
  font-size: 13px !important;
  font-weight: 700 !important;
  gap: 4px !important;
}

/* ============================================
   Enhanced Buttons
   ============================================ */

.btn {
  letter-spacing: 0.4px !important;
  font-weight: 800 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  box-shadow: 0 1px 2px rgba(28, 48, 36, 0.16) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #35704A 0%, var(--primary) 100%) !important;
  box-shadow: 0 2px 6px rgba(28, 48, 36, 0.20) !important;
  transform: translateY(-1px) !important;
}

/* Pressing used to leave the button two pixels above where it started, so
   it read as still hovering rather than pressed. It now goes back to rest. */
.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 1px rgba(28, 48, 36, 0.18) !important;
}

.btn-secondary {
  background-color: var(--surface-soft) !important;
  border: 1.5px solid #D8D5CF !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.btn-secondary:hover {
  background-color: var(--surface-strong) !important;
  border-color: #C6C2BA !important;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.btn-block {
  width: 100% !important;
  padding: 12px 16px !important;
}

/* ============================================
   Enhanced Badges
   ============================================ */

.badge {
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 6px 10px !important;
  letter-spacing: 0.4px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}

/* This border was 2px while the other two badges were 1px, so an "Active"
   pill sat two pixels larger than the "Inactive" beside it in the same
   column. All three match now; the colour is carried a little stronger to
   make up for the thinner line. */
.badge-success {
  background-color: var(--success-light) !important;
  color: #1D6B41 !important;
  border: 1px solid rgba(46, 139, 87, 0.55) !important;
  box-shadow: var(--glow-success) !important;
  position: relative;
  overflow: hidden;
}

/* The three status colours came from three different places - a stock
   red-pink, a stock amber, and the brand green - so a row of badges read as
   three unrelated pills. They are pulled onto one recipe here: a tinted
   background, a border of the same hue at the same width, and text dark
   enough to stay readable at the 11px these are set in. */
.badge-danger {
  background-color: var(--danger-light) !important;
  color: #8E2A34 !important;
  border: 1px solid rgba(193, 59, 71, 0.35) !important;
  box-shadow: var(--glow-danger) !important;
}

.badge-warning {
  background-color: var(--warning-light) !important;
  color: #7A5209 !important;
  border: 1px solid rgba(183, 123, 18, 0.35) !important;
  box-shadow: 0 1px 2px rgba(122, 82, 9, 0.12) !important;
}

/* ============================================
   Enhanced Cards
   ============================================ */

.card {
  border: 1px solid #E4E2DD !important;
  box-shadow: var(--shadow-light) !important;
  transition: box-shadow 0.25s ease !important;
}

.card:hover {
  box-shadow: var(--shadow-md) !important;
}

.card-header {
  background-color: var(--surface-soft) !important;
  padding: 18px 20px !important;
  border-bottom: 2px solid #E4E2DD !important;
}

.card-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.card-body {
  padding: 20px !important;
}

/* ============================================
   Enhanced Tables
   ============================================ */

table {
  border-collapse: collapse !important;
}

table thead {
  background-color: var(--surface-soft) !important;
}

table th {
  padding: 14px 16px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--primary) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--primary) !important;
}

table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #EDEBE6 !important;
  font-size: 13px !important;
}

table tbody tr {
  transition: background-color 0.2s ease !important;
}

/* Hovering a row used to shift it four pixels to the right and hang a bar
   off its left edge. On a billing table the eye is tracking along a line to
   read an amount, and having that line jump sideways under the cursor is
   the opposite of helpful. The row is marked by tone alone now, which is
   enough to follow and holds still while it is read. */
table tbody tr:hover {
  background-color: rgba(46, 139, 87, 0.07) !important;
}

table tbody tr:nth-child(even) {
  background-color: #FAFAF8 !important;
}

table th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: 25px !important;
}

table th.sortable::after {
  content: '↕';
  position: absolute;
  right: 8px;
  opacity: 0.3;
}

table th.sort-asc::after { content: '↑'; opacity: 1; color: var(--success); }
table th.sort-desc::after { content: '↓'; opacity: 1; color: var(--success); }

.row-alert-danger {
  background-color: #FDF5F5 !important;
  border-left: 4px solid var(--danger) !important;
}

/* ============================================
   Enhanced Forms
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
  padding: 12px 14px !important;
  font-size: 14px !important;
  border: 1.5px solid #D2CFC8 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  font-family: inherit !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(45, 95, 63, 0.1) !important;
  outline: none !important;
}

.form-group {
  margin-bottom: 18px !important;
}

.form-group label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  display: block !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* ============================================
   Enhanced Navigation
   ============================================ */

.sidebar-nav-link {
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.25s ease !important;
}

.sidebar-nav-link.active {
  border-left: 4px solid var(--primary) !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, rgba(46, 139, 87, 0.16) 0%, rgba(46, 139, 87, 0.02) 100%) !important;
  color: var(--primary-darker) !important;
}

.sidebar-nav-link:hover {
  background-color: rgba(46, 139, 87, 0.09) !important;
}

.page-header {
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 2px solid #EDEBE6 !important;
}

/* ============================================
   Enhanced Pagination
   ============================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.pagination button,
.pagination a {
  padding: 8px 12px;
  min-width: 40px;
  border: 1px solid #D2CFC8;
  background-color: white;
  color: var(--primary);
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination button:hover,
.pagination a:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.pagination button.active,
.pagination a.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ============================================
   Enhanced Status Indicators
   ============================================ */

.status-active {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--success);
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.16);
}

.status-inactive {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #A7A199;
}

.status-pending {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--warning);
  box-shadow: 0 0 0 3px rgba(183, 123, 18, 0.16);
}

/* ============================================
   Enhanced Modals
   ============================================ */

.modal-header {
  background-color: var(--surface-soft) !important;
  border-bottom: 2px solid #E4E2DD !important;
  padding: 18px 20px !important;
}

.modal-header h2 {
  margin: 0 !important;
  color: var(--primary) !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  background-color: var(--surface-soft) !important;
  border-top: 1px solid #E4E2DD !important;
  padding: 16px 20px !important;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ============================================
   Enhanced Loading & Accessibility
   ============================================ */

:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* Improved mobile responsiveness */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  h1 {
    font-size: 32px !important;
  }
}

@media (max-width: 640px) {
  .grid-4 {
    grid-template-columns: 1fr !important;
  }
  
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
  
  h1 {
    font-size: 28px !important;
  }
  
  .stat-value {
    font-size: 32px !important;
  }
  
  table {
    font-size: 12px !important;
  }
  
  table th,
  table td {
    padding: 10px 8px !important;
  }
}

/* ============================================
   Enhanced Text Visibility (Subscriber Names)
   ============================================ */

/* Make all paragraphs in account info more readable */
.card-body p {
  font-weight: 600 !important;
  color: var(--primary) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Enhanced styling for account information values */
.card-body > div > p {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
  letter-spacing: 0.2px !important;
  margin-top: 6px !important;
}

/* Make navbar profile name more prominent */
.navbar-profile-name {
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
}

/* This rule painted the heading white with a drop shadow, which belongs on
   a coloured banner. There is no such banner: the selector matches the
   first block inside the main area, and on every page that is the page
   header. So each title was white text on a near-white background, lit
   only by its own shadow - the embossed look, and unreadable without it.
   It gave itself away on the dashboard, where a flash message takes the
   first slot and the title escaped the rule and looked normal.

   The heading is now simply a heading. Kept a step above the section
   headings below it and set in the darkest ink of the palette, where the
   contrast comes from the text rather than from an effect behind it. */
.app-main > div:first-child h1,
.page-header h1,
.page-header .page-header-title {
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
  letter-spacing: -0.4px !important;
  font-size: 30px !important;
}

/* Account ID and service details emphasis */
.card-body > div > p[style*="monospace"],
.card-body > div:last-child > p {
  font-weight: 800 !important;
  color: var(--primary-dark) !important;
}

/* ============================================
   Smooth Transitions & Animations
   ============================================ */

* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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


/* ============================================
   Brand logo
   logo.jpg is a full company lockup: a satellite-dish mark above the
   words "MUNOZ Satellite Cable and Internet Inc.".

   That means two treatments. Where there is room (the sign-in screens) the
   whole lockup is shown and never cropped. In a small square slot beside
   text that already names the company (navbar, invoice header) the wordmark
   would be unreadable, so only the dish mark is shown, framed by zooming
   into the top of the artwork.
   ============================================ */

/* Whole lockup, never cropped or distorted. */
.brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Small square slot: the dish mark only. Always fills its container. */
.brand-icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url("../logo.jpg");
  background-repeat: no-repeat;
  /* Zoom and offset chosen to frame the dish and drop the wordmark below it. */
  background-size: 190%;
  background-position: 56% 7%;
  background-color: #fff;
}

/* Navbar: square icon slot. */
.navbar-brand-icon {
  background: none;
  padding: 0;
  overflow: hidden;
}

/* Sign-in screens size .login-logo in auth.css, which loads after this file. */

/* Keep a white plate behind the mark in dark mode so the green artwork reads. */
[data-theme="dark"] .navbar-brand-icon {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .login-logo .brand-mark {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 8px;
}

/* ============================================
   Confirmation repeated on screen
   ============================================ */

/* Shown only when an action's confirmation ended up above the viewport,
   because the reader was returned to the row they were working on rather
   than to the top of the page. Fixed to the window, so it sits over the
   page without taking part in its layout and nothing below it moves. */
.flash-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 4000;
  max-width: 360px;
  margin: 0 !important;
  box-shadow: var(--shadow-lg);
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.flash-toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

/* Someone who has asked for less movement gets the message without the
   slide, rather than losing the confirmation altogether. */
@media (prefers-reduced-motion: reduce) {
  .flash-toast {
    transition: opacity 0.5s ease;
  }
  .flash-toast.is-leaving {
    transform: none;
  }
}

/* ============================================
   Destructive actions in a list
   ============================================ */

/* Every row carried a solid red delete button, so the loudest thing on a
   page of subscribers was the control that removes them - the eye is drawn
   down a column of alarms while looking for an ordinary Edit. In a list the
   delete is held back to a tint, and turns solid the moment it is pointed
   at, which is when the intent to use it exists. The button that actually
   confirms the deletion, in the dialog that follows, stays as loud as it
   was: that is the point of no return and it should look like one.

   No border is added and nothing is resized - only the fill and the text
   colour change, so the row is laid out exactly as before. */
td .btn-danger,
.table-actions .btn-danger {
  background-color: rgba(193, 59, 71, 0.10) !important;
  color: #8E2A34 !important;
  box-shadow: none !important;
}

td .btn-danger:hover,
.table-actions .btn-danger:hover {
  background-color: var(--danger) !important;
  color: var(--neutral-white) !important;
}

td .btn-danger:focus-visible,
.table-actions .btn-danger:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* ============================================
   Dark theme corrections
   ============================================ */

/* The rules above name a few greys directly, for hairlines and striping
   where a token would have been overkill in a single theme. They are fixed
   values, so they stayed pale when the theme went dark and drew bright
   lines across dark cards. Each is answered here. */
[data-theme="dark"] .card {
  border-color: #2F343B !important;
}

/* Except a stat card's left edge, which is not a hairline but a status: amber
   for waiting, red for overdue. The rule above recolours every card border for
   the dark theme and, being later and just as specific, took the accent with
   it, so on a dark screen every stat card said the same thing again. The
   tokens carry their own lighter dark-theme values. */
[data-theme="dark"] .card.stat-card          { border-left-color: var(--primary) !important; }
[data-theme="dark"] .card.stat-card--danger  { border-left-color: var(--danger) !important; }
[data-theme="dark"] .card.stat-card--success { border-left-color: var(--success) !important; }
[data-theme="dark"] .card.stat-card--warning { border-left-color: var(--warning) !important; }

[data-theme="dark"] .card-header {
  border-bottom-color: #2F343B !important;
}

[data-theme="dark"] table td {
  border-bottom-color: #2A2F35 !important;
}

[data-theme="dark"] table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] table tbody tr:hover {
  background-color: rgba(95, 190, 136, 0.10) !important;
}

[data-theme="dark"] .btn-secondary {
  border-color: #3A4048 !important;
}

[data-theme="dark"] .page-header {
  border-bottom-color: #2A2F35 !important;
}

/* Badge text was darkened for white cards; against a dark fill the same
   colours disappear, so each is lifted to the light end of its own hue. */
[data-theme="dark"] .badge-success { color: #8FD8AC !important; }
[data-theme="dark"] .badge-danger  { color: #F2A0A8 !important; }
[data-theme="dark"] .badge-warning { color: #E8C070 !important; }

[data-theme="dark"] td .btn-danger,
[data-theme="dark"] .table-actions .btn-danger {
  background-color: rgba(228, 112, 124, 0.16) !important;
  color: #F2A0A8 !important;
}

[data-theme="dark"] .row-alert-danger {
  background-color: rgba(228, 112, 124, 0.10) !important;
}

/* Fields keep their own surface so they read as places to type rather than
   as holes cut in the card. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #15181C !important;
  border-color: #3A4048 !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .pagination button,
[data-theme="dark"] .pagination a {
  background-color: var(--surface-soft);
  border-color: #3A4048;
  color: var(--primary);
}

/* ============================================
   Plan pill and information panels
   ============================================ */

/* These were written as inline styles with a fixed pale blue background and
   no text colour, so the text took whatever the theme gave it. In dark mode
   that is near-white on a near-white pill: the plan names disappeared and
   the column read as a row of blank boxes. An inline background cannot be
   answered from a stylesheet either, so they had to become classes before
   the theme could reach them.
   The blue was left over from a palette this system no longer uses. */
.plan-pill {
  display: inline-block;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(46, 139, 87, 0.12);
  color: var(--primary-darker);
  border: 1px solid rgba(46, 139, 87, 0.22);
  white-space: nowrap;
}

[data-theme="dark"] .plan-pill {
  background-color: rgba(95, 190, 136, 0.16);
  color: #A8DEC0;
  border-color: rgba(95, 190, 136, 0.28);
}

/* A quiet panel for a figure the reader needs before acting - the amount
   outstanding above a payment form, for instance. */
.info-panel {
  background-color: var(--surface-soft);
  border: 1px solid rgba(46, 139, 87, 0.18);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

[data-theme="dark"] .info-panel {
  background-color: var(--surface-strong);
  border-color: rgba(95, 190, 136, 0.22);
}