/* ==========================================================================
   Digiprime Portal — design system layer
   --------------------------------------------------------------------------
   Loaded AFTER material-dashboard.css, so everything here intentionally wins.
   This file is hand-written and has no build step: there is no SCSS source for
   the Material template in this repo (public/material/css/* is a vendored
   build), and resources/css/app.css is not compiled by the current mix config.
   Edit this file directly.

   Structure:
     1.  Tokens
     2.  Base & typography
     3.  Layout shell (sidebar, navbar, content, footer)
     4.  Cards & surfaces
     5.  Page header
     6.  Stat tiles
     7.  Product / catalog cards
     8.  List rows (services, invoices, sites)
     9.  Badges, chips & money
     10. Buttons
     11. Tables, forms, modals
     12. Alerts & empty states
     13. Auth / login
     14. Responsive
   ========================================================================== */


/* 1. Tokens ================================================================ */

:root {
  /* Brand — sampled from the Digiprime logo mark (light green -> deep green).
     Everything green in this UI must come from these, not from Material's
     `success` palette, which is a different, bluer green. */
  --dp-brand-300: #9BD770;
  --dp-brand-400: #6FC26A;
  --dp-brand-500: #45A566;
  --dp-brand-600: #338754;
  --dp-brand-700: #246645;
  --dp-brand-gradient: linear-gradient(135deg, #9BD770 0%, #52B06A 45%, #2E8558 100%);
  --dp-brand-soft: rgba(69, 165, 102, .10);

  /* Ink — desaturated greens rather than neutral greys, so text sits in the
     same family as the brand instead of next to it. */
  --dp-ink-900: #0D1B14;
  --dp-ink-800: #16281F;
  --dp-ink-700: #2A3B33;
  --dp-ink-600: #43544B;
  --dp-ink-500: #5C6B63;
  --dp-ink-400: #7C8B83;
  --dp-ink-300: #A6B2AB;

  --dp-line: #E4EAE6;
  --dp-line-soft: #EFF3F1;
  --dp-surface: #FFFFFF;
  --dp-surface-alt: #FAFCFB;
  --dp-bg: #F4F7F5;

  /* Pillar accents (see config/catalog.php) */
  --dp-accent-green: #45A566;
  --dp-accent-teal: #1F9E92;
  --dp-accent-lime: #7FB833;
  --dp-accent-violet: #7A5CD6;

  /* Status */
  --dp-success: #2E9E5B;
  --dp-success-soft: rgba(46, 158, 91, .12);
  --dp-warning: #B9820E;
  --dp-warning-soft: rgba(185, 130, 14, .13);
  --dp-danger: #CF4045;
  --dp-danger-soft: rgba(207, 64, 69, .11);
  --dp-info: #2C7BE5;
  --dp-info-soft: rgba(44, 123, 229, .11);

  --dp-r-sm: 10px;
  --dp-r-md: 14px;
  --dp-r-lg: 20px;
  --dp-r-pill: 999px;

  --dp-shadow-sm: 0 1px 2px rgba(13, 27, 20, .05), 0 1px 3px rgba(13, 27, 20, .05);
  --dp-shadow-md: 0 4px 14px rgba(13, 27, 20, .06), 0 2px 4px rgba(13, 27, 20, .04);
  --dp-shadow-lg: 0 18px 40px -14px rgba(13, 27, 20, .20);
  --dp-shadow-brand: 0 10px 24px -10px rgba(69, 165, 102, .55);

  --dp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dp-font-display: 'Plus Jakarta Sans', var(--dp-font);

  --dp-sidebar-w: 268px;
}


/* 2. Base & typography ===================================================== */

body,
body.sidebar-mini,
.wrapper {
  font-family: var(--dp-font);
  background: var(--dp-bg);
  color: var(--dp-ink-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
p,
.card p,
td,
th,
label,
input,
select,
textarea,
button,
.btn,
.dropdown-menu,
.navbar,
.sidebar {
  font-family: var(--dp-font);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.dp-display,
.dp-money {
  font-family: var(--dp-font-display);
  color: var(--dp-ink-900);
  letter-spacing: -.015em;
}

.card .card-title {
  font-weight: 700;
  margin-top: 0;
}

/* Money and dates are compared down a column constantly in this app; tabular
   figures keep the digits aligned so scanning a list actually works. */
.dp-money,
.dp-num,
.dp-date,
.table td.dp-num,
.dp-stat__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.dp-muted { color: var(--dp-ink-400); }
.dp-strong { color: var(--dp-ink-900); font-weight: 600; }

.dp-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dp-ink-400);
  margin: 0 0 4px;
  line-height: 1.4;
}

.dp-value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--dp-ink-900);
  line-height: 1.45;
}

.dp-value small,
.dp-value .dp-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--dp-ink-400);
  margin-top: 2px;
}

a { color: var(--dp-brand-600); }
a:hover, a:focus { color: var(--dp-brand-700); text-decoration: none; }


/* 3. Layout shell ========================================================== */

/* --- Sidebar ------------------------------------------------------------- */

/* NB: do NOT add `.off-canvas-sidebar` to these selectors. Despite the name it
   is the *body* class on guest pages (layouts/app.blade.php passes
   ['class' => 'off-canvas-sidebar'] on login), so styling it as a sidebar sets
   width:268px on <body> and collapses the whole login screen into a column. */
.sidebar {
  width: var(--dp-sidebar-w);
  box-shadow: none;
  border-right: 1px solid rgba(255, 255, 255, .04);
}

/* The template paints a photo behind the sidebar via :after. A stock photo
   behind the navigation is the single loudest "this is a bought template"
   signal, so it's replaced with a flat brand-tinted gradient. */
.sidebar:after {
  background: linear-gradient(180deg, #0E2019 0%, #0B1811 60%, #0A140F 100%);
  opacity: 1;
}

.sidebar .sidebar-wrapper {
  width: 100%;
  padding-bottom: 24px;
}

.sidebar .logo {
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 6px;
}

.sidebar .logo:after { display: none; }

.sidebar .logo a.logo-normal { display: block; line-height: 1; }

.sidebar .logo img {
  width: auto;
  max-width: 156px;
  height: auto;
  display: block;
}

.sidebar .dp-nav-section {
  padding: 20px 22px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}

.sidebar .nav { margin-top: 0; }

.sidebar .nav li > a {
  margin: 2px 12px;
  padding: 11px 14px;
  border-radius: var(--dp-r-sm);
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .18s ease, color .18s ease;
}

.sidebar .nav li > a:hover,
.sidebar .nav li > a:focus {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.sidebar .nav li > a i,
.sidebar .nav li > a .material-icons {
  font-size: 20px;
  color: rgba(255, 255, 255, .55);
  transition: color .18s ease;
}

.sidebar .nav li > a:hover i,
.sidebar .nav li > a:hover .material-icons { color: rgba(255, 255, 255, .9); }

.sidebar .nav li > a p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Active state. The template drives this off data-color and lays a coloured
   box-shadow under it; we override both so it always reads brand-green
   regardless of the data-color attribute left on the markup. */
.sidebar .nav li.active > a,
.sidebar[data-color] .nav li.active > a,
.sidebar .nav li.active > a:hover,
.sidebar .nav li.active > a:focus {
  background: var(--dp-brand-gradient) !important;
  color: #fff !important;
  box-shadow: var(--dp-shadow-brand) !important;
  font-weight: 600;
}

.sidebar .nav li.active > a i,
.sidebar .nav li.active > a .material-icons { color: #fff !important; }

.sidebar .nav li.active > a:after {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--dp-brand-300);
}

/* Unread count on a nav item — currently only the enquiry inbox, which is the
   one nav entry representing work someone is waiting on. */
.sidebar .nav li > a .dp-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--dp-r-pill);
  background: var(--dp-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  flex: 0 0 auto;
}

.sidebar .nav li.active > a .dp-nav-badge {
  background: rgba(255, 255, 255, .25);
}

/* The template lays nav links out with the icon and <p> inline; the badge needs
   the row to be a flex line so margin-left:auto can push it to the end. */
.sidebar .nav li > a {
  display: flex;
  align-items: center;
}

.sidebar .nav li > a p { margin: 0; flex: 1 1 auto; }

/* Small brand footer pinned under the nav so the sidebar doesn't just stop. */
.sidebar .dp-sidebar-foot {
  margin: 22px 22px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .36);
}

.sidebar .dp-sidebar-foot strong {
  display: block;
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- Main panel ---------------------------------------------------------- */

.main-panel {
  width: calc(100% - var(--dp-sidebar-w));
  background: var(--dp-bg);
}

.main-panel > .content {
  padding: 24px 30px 40px;
  min-height: calc(100vh - 140px);
}

/* --- Top navbar ---------------------------------------------------------- */

/* Scoped to the authenticated panel only. The guest pages use the same
   .navbar.navbar-absolute over a dark photographic hero with white link text —
   giving that a light translucent background makes the links unreadable. */
.main-panel > .navbar {
  padding: 14px 30px;
  background: rgba(244, 247, 245, .82) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--dp-line);
  box-shadow: none;
  min-height: 68px;
}

.navbar .navbar-brand {
  font-family: var(--dp-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--dp-ink-900);
  letter-spacing: -.02em;
  padding: 0;
}

.navbar .navbar-nav .nav-link {
  color: var(--dp-ink-600);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--dp-r-sm);
  transition: background-color .18s ease, color .18s ease;
}

.navbar .navbar-nav .nav-link:hover { background: rgba(13, 27, 20, .05); color: var(--dp-ink-900); }

.navbar .navbar-nav .nav-link .material-icons { color: var(--dp-ink-500); }

/* Notification counter — the template renders a bare number that collides with
   the bell glyph. */
.navbar .navbar-nav .nav-link .notification {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--dp-r-pill);
  background: var(--dp-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--dp-bg);
}

.navbar .navbar-nav .nav-link .notification.dp-notification--zero {
  background: var(--dp-ink-300);
}

/* Region pill (managers work across AU and BR from either domain) */
.dp-region-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--dp-r-pill);
  background: var(--dp-surface);
  border: 1px solid var(--dp-line);
  box-shadow: var(--dp-shadow-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--dp-ink-700);
  letter-spacing: .01em;
}

.dp-region-pill .material-icons { font-size: 15px; color: var(--dp-brand-500); }
.dp-region-pill .dp-region-pill__cur { color: var(--dp-ink-400); font-weight: 500; }

/* Profile chip */
.dp-profile-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}

.dp-profile-chip .dp-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--dp-r-pill);
  background: var(--dp-brand-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  letter-spacing: .02em;
  flex: 0 0 30px;
}

.dp-profile-chip .dp-profile-chip__name {
  font-weight: 600;
  color: var(--dp-ink-800);
  font-size: 14px;
  /* The template uppercases every navbar link, which turned a person's name
     into "JANETH". Names render as they were entered. */
  text-transform: none;
}

.dropdown-menu {
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-md);
  box-shadow: var(--dp-shadow-lg);
  padding: 6px;
  min-width: 210px;
}

.dropdown-menu .dropdown-item {
  border-radius: var(--dp-r-sm);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--dp-ink-700);
  white-space: normal;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--dp-brand-soft) !important;
  color: var(--dp-brand-700) !important;
  box-shadow: none;
}

.dropdown-menu .dp-dropdown-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--dp-ink-400);
  text-align: center;
}

.dropdown-menu .dp-dropdown-head {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dp-ink-300);
}

/* --- Footer -------------------------------------------------------------- */

.dp-footer {
  padding: 20px 30px 26px;
  border-top: 1px solid var(--dp-line);
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--dp-ink-400);
}

.dp-footer a { color: var(--dp-ink-500); font-weight: 500; }
.dp-footer a:hover { color: var(--dp-brand-600); }
.dp-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }


/* 4. Cards & surfaces ====================================================== */

.card {
  border-radius: var(--dp-r-lg);
  border: 1px solid var(--dp-line);
  box-shadow: var(--dp-shadow-sm);
  background: var(--dp-surface);
  margin-bottom: 24px;
}

.card:not(.card-plain):hover { box-shadow: var(--dp-shadow-md); }

.card .card-body { padding: 22px 24px; }
.card .card-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--dp-line-soft);
  margin-top: 0;
}

.card.card-plain {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.card.card-plain:hover { box-shadow: none; }

/* The template's coloured gradient card headers are used throughout the admin
   screens. Keep them, but calm them down: smaller radius delta, softer shadow,
   and the "info"/"success" variants re-pointed at the brand green so an admin
   screen doesn't turn up cyan next to a green client screen. */
.card [class*='card-header-'] {
  border-radius: var(--dp-r-md);
  box-shadow: var(--dp-shadow-sm);
}

.card .card-header-info,
.card .card-header-success {
  background: var(--dp-brand-gradient) !important;
  box-shadow: var(--dp-shadow-brand) !important;
}

.card .card-header-icon .card-icon,
.card .card-header-icon i.material-icons {
  border-radius: var(--dp-r-md);
}

/* Soft, borderless surface used inside cards for secondary blocks */
.dp-panel {
  background: var(--dp-surface-alt);
  border: 1px solid var(--dp-line-soft);
  border-radius: var(--dp-r-md);
  padding: 16px 18px;
}


/* 5. Page header =========================================================== */

.dp-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 26px;
}

.dp-page-head__title {
  font-family: var(--dp-font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--dp-ink-900);
  margin: 0;
}

.dp-page-head__sub {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--dp-ink-400);
  max-width: 62ch;
}

.dp-page-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Segmented control — replaces the ad-hoc btn-link tabs on the invoices pages */
.dp-segment {
  display: inline-flex;
  padding: 4px;
  background: var(--dp-surface);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-pill);
  box-shadow: var(--dp-shadow-sm);
}

.dp-segment > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--dp-r-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dp-ink-500);
  line-height: 1;
  transition: all .18s ease;
}

.dp-segment > a:hover { color: var(--dp-ink-900); background: var(--dp-line-soft); }

.dp-segment > a.is-active {
  background: var(--dp-brand-gradient);
  color: #fff;
  box-shadow: var(--dp-shadow-brand);
}

.dp-segment > a .material-icons { font-size: 17px; }
.dp-segment > a .dp-segment__count {
  padding: 1px 7px;
  border-radius: var(--dp-r-pill);
  background: rgba(13, 27, 20, .07);
  font-size: 11px;
  font-weight: 700;
}
.dp-segment > a.is-active .dp-segment__count { background: rgba(255, 255, 255, .24); }


/* 6. Stat tiles ============================================================ */

.dp-stat {
  position: relative;
  display: block;
  height: 100%;
  padding: 22px 24px;
  background: var(--dp-surface);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-lg);
  box-shadow: var(--dp-shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

a.dp-stat:hover { box-shadow: var(--dp-shadow-md); transform: translateY(-2px); }

.dp-stat:before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--dp-brand-gradient);
}

.dp-stat--warning:before { background: linear-gradient(180deg, #E5B23C, #B9820E); }
.dp-stat--danger:before { background: linear-gradient(180deg, #E4696D, #CF4045); }
.dp-stat--neutral:before { background: linear-gradient(180deg, #C9D3CD, #A6B2AB); }

.dp-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dp-stat__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dp-ink-400);
  line-height: 1.35;
}

.dp-stat__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: var(--dp-r-md);
  background: var(--dp-brand-soft);
  color: var(--dp-brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-stat__icon .material-icons { font-size: 20px; }

/* Reconciliation bucket headers reuse the stat icon chip, keyed by meaning
   rather than by a Material template colour name. */
.dp-bucket-icon--danger { background: var(--dp-danger-soft); color: var(--dp-danger); }
.dp-bucket-icon--warning { background: var(--dp-warning-soft); color: var(--dp-warning); }
.dp-bucket-icon--success { background: var(--dp-success-soft); color: var(--dp-success); }
.dp-bucket-icon--neutral { background: var(--dp-line-soft); color: var(--dp-ink-400); }
.dp-stat--warning .dp-stat__icon { background: var(--dp-warning-soft); color: var(--dp-warning); }
.dp-stat--danger .dp-stat__icon { background: var(--dp-danger-soft); color: var(--dp-danger); }
.dp-stat--neutral .dp-stat__icon { background: var(--dp-line-soft); color: var(--dp-ink-400); }

.dp-stat__value {
  font-family: var(--dp-font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--dp-ink-900);
}

.dp-stat__value small {
  font-size: 15px;
  font-weight: 600;
  color: var(--dp-ink-400);
  letter-spacing: 0;
}

.dp-stat__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dp-line-soft);
  font-size: 13px;
  color: var(--dp-ink-400);
}

.dp-stat__foot .material-icons { font-size: 16px; }
.dp-stat__foot .dp-stat__link { margin-left: auto; font-weight: 600; color: var(--dp-brand-600); }


/* 7. Product / catalog cards =============================================== */

.dp-product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--dp-surface);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-lg);
  box-shadow: var(--dp-shadow-sm);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.dp-product:hover {
  box-shadow: var(--dp-shadow-lg);
  transform: translateY(-3px);
  border-color: rgba(69, 165, 102, .35);
}

/* Accent rail across the top, coloured by the derived pillar */
.dp-product:before {
  content: '';
  display: block;
  height: 4px;
  background: var(--dp-accent, var(--dp-brand-500));
}

.dp-accent-green { --dp-accent: var(--dp-accent-green); --dp-accent-soft: rgba(69, 165, 102, .12); }
.dp-accent-teal { --dp-accent: var(--dp-accent-teal); --dp-accent-soft: rgba(31, 158, 146, .12); }
.dp-accent-lime { --dp-accent: var(--dp-accent-lime); --dp-accent-soft: rgba(127, 184, 51, .14); }
.dp-accent-violet { --dp-accent: var(--dp-accent-violet); --dp-accent-soft: rgba(122, 92, 214, .12); }

.dp-product__body {
  padding: 22px 24px 18px;
  flex: 1 1 auto;
}

.dp-product__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dp-product__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: var(--dp-r-md);
  background: var(--dp-accent-soft, var(--dp-brand-soft));
  color: var(--dp-accent, var(--dp-brand-600));
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-product__icon .material-icons { font-size: 24px; }

.dp-product__pillar {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--dp-r-pill);
  background: var(--dp-accent-soft, var(--dp-brand-soft));
  color: var(--dp-accent, var(--dp-brand-700));
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.dp-product__name {
  font-family: var(--dp-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--dp-ink-900);
  margin: 0 0 8px;
}

.dp-product__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dp-ink-500);
  margin: 0;
}

.dp-product__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--dp-ink-400);
}

.dp-product__meta .material-icons { font-size: 15px; }

.dp-product__price {
  padding: 16px 24px;
  border-top: 1px solid var(--dp-line-soft);
  background: var(--dp-surface-alt);
}

.dp-product__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.dp-product__amount .dp-money {
  font-family: var(--dp-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--dp-ink-900);
  line-height: 1.1;
}

.dp-product__amount .dp-money--was {
  font-size: 15px;
  font-weight: 600;
  color: var(--dp-ink-300);
  text-decoration: line-through;
  letter-spacing: -.01em;
}

.dp-product__amount .dp-currency {
  font-size: 12px;
  font-weight: 600;
  color: var(--dp-ink-400);
  letter-spacing: .04em;
}

.dp-product__actions { padding: 0 24px 22px; }

.dp-product .dp-btn { width: 100%; justify-content: center; }

/* Manager-only edit/delete, tucked into the corner so they never compete with
   the client-facing content. */
.dp-product__admin {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .18s ease;
}

.dp-product:hover .dp-product__admin,
.dp-product__admin:focus-within { opacity: 1; }

.dp-icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--dp-r-sm);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--dp-shadow-sm);
  color: var(--dp-ink-500);
  padding: 0;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.dp-icon-btn:hover { background: #fff; color: var(--dp-ink-900); }
.dp-icon-btn--danger:hover { color: var(--dp-danger); }
.dp-icon-btn .material-icons { font-size: 17px; }


/* 8. List rows ============================================================= */

/* Replaces the card-inside-card-inside-card pattern the list pages used, where
   a `card-header-icon` was being used as a table cell. One row = one grid. */
.dp-rows { display: flex; flex-direction: column; gap: 12px; }

/* The action column is a fixed width rather than `auto`. With `auto` its width
   follows whatever buttons that particular row happens to have, which pushes
   the fr columns sideways — so a row with a "Renovar" button had its Valor and
   Início columns misaligned against the row directly below it. In a list, the
   labels must line up down the page. */
.dp-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(110px, 1fr)) 150px;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--dp-surface);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-lg);
  box-shadow: var(--dp-shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.dp-row:hover { box-shadow: var(--dp-shadow-md); border-color: #D8E2DC; }

/* --3 is wider at the end because the invoice rows carry two buttons
   ("Nota fiscal" + "Pagar agora"). */
.dp-row--3 { grid-template-columns: minmax(200px, 1.6fr) repeat(2, minmax(110px, 1fr)) 260px; }
.dp-row--2 { grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) 170px; }

/* Left-hand identity cell: icon + title + status */
.dp-row__ident {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dp-row__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--dp-r-md);
  background: var(--dp-brand-soft);
  color: var(--dp-brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-row__icon .material-icons { font-size: 22px; }
.dp-row__icon--success { background: var(--dp-success-soft); color: var(--dp-success); }
.dp-row__icon--warning { background: var(--dp-warning-soft); color: var(--dp-warning); }
.dp-row__icon--danger { background: var(--dp-danger-soft); color: var(--dp-danger); }
.dp-row__icon--neutral { background: var(--dp-line-soft); color: var(--dp-ink-400); }

.dp-row__text { min-width: 0; }

.dp-row__title {
  font-family: var(--dp-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--dp-ink-900);
  line-height: 1.35;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}

.dp-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Emphasised amount inside a row */
.dp-row .dp-value--amount {
  font-family: var(--dp-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.025em;
}

/* A row that needs attention (overdue invoice, lapsed subscription) */
.dp-row--alert { border-color: rgba(207, 64, 69, .32); background: linear-gradient(0deg, rgba(207, 64, 69, .03), rgba(207, 64, 69, .03)), var(--dp-surface); }
.dp-row--due { border-color: rgba(185, 130, 14, .32); background: linear-gradient(0deg, rgba(185, 130, 14, .035), rgba(185, 130, 14, .035)), var(--dp-surface); }


/* 8b. Usage meters (mailbox storage) ======================================= */

.dp-meter {
  display: block;
  height: 8px;
  border-radius: var(--dp-r-pill);
  background: var(--dp-line-soft);
  overflow: hidden;
  margin: 8px 0 6px;
}

.dp-meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--dp-r-pill);
  background: var(--dp-brand-gradient);
  transition: width .4s ease;
}

.dp-meter--warning .dp-meter__fill { background: linear-gradient(90deg, #E5B23C, #B9820E); }
.dp-meter--danger .dp-meter__fill { background: linear-gradient(90deg, #E4696D, #CF4045); }

/* Never synced / unlimited: a striped rail rather than a 0% bar, because an
   empty bar reads as "empty mailbox" when it actually means "no figure". */
.dp-meter--unknown {
  background: repeating-linear-gradient(
    -45deg,
    var(--dp-line-soft) 0 6px,
    #E9EEEB 6px 12px
  );
}

.dp-meter--unknown .dp-meter__fill { display: none; }

.dp-meter-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--dp-ink-500);
  font-variant-numeric: tabular-nums;
}

.dp-meter-label strong { color: var(--dp-ink-900); font-weight: 700; }


/* 9. Badges, chips & money ================================================= */

.badge,
.dp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--dp-r-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.35;
  text-transform: none;
  border: 0;
}

.badge .material-icons,
.dp-badge .material-icons { font-size: 14px; }

.badge-success, .dp-badge--success { background: var(--dp-success-soft) !important; color: var(--dp-success) !important; }
.badge-danger, .dp-badge--danger { background: var(--dp-danger-soft) !important; color: var(--dp-danger) !important; }
.badge-warning, .dp-badge--warning { background: var(--dp-warning-soft) !important; color: var(--dp-warning) !important; }
.badge-info, .dp-badge--info { background: var(--dp-info-soft) !important; color: var(--dp-info) !important; }
.badge-secondary, .badge-default, .dp-badge--neutral { background: var(--dp-line-soft) !important; color: var(--dp-ink-500) !important; }
.badge-primary, .dp-badge--brand { background: var(--dp-brand-soft) !important; color: var(--dp-brand-700) !important; }

/* Discount / offer flag */
.dp-badge--offer {
  background: var(--dp-brand-gradient);
  color: #fff;
  box-shadow: var(--dp-shadow-brand);
}

.dp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--dp-r-pill);
  background: var(--dp-surface-alt);
  border: 1px solid var(--dp-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--dp-ink-500);
}

.dp-chip .material-icons { font-size: 14px; }


/* 10. Buttons ============================================================== */

.dp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--dp-r-pill);
  font-family: var(--dp-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  text-transform: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.dp-btn:hover { transform: translateY(-1px); text-decoration: none; }
.dp-btn:active { transform: translateY(0); }
.dp-btn .material-icons { font-size: 18px; }

.dp-btn--primary {
  background: var(--dp-brand-gradient);
  color: #fff;
  box-shadow: var(--dp-shadow-brand);
}

.dp-btn--primary:hover,
.dp-btn--primary:focus { color: #fff; box-shadow: 0 14px 30px -10px rgba(69, 165, 102, .68); }

.dp-btn--ghost {
  background: var(--dp-surface);
  border-color: var(--dp-line);
  color: var(--dp-ink-700);
  box-shadow: var(--dp-shadow-sm);
}

.dp-btn--ghost:hover { color: var(--dp-ink-900); border-color: #CFDAD4; }

.dp-btn--quiet {
  background: transparent;
  color: var(--dp-ink-500);
  padding-left: 12px;
  padding-right: 12px;
}

.dp-btn--quiet:hover { background: var(--dp-line-soft); color: var(--dp-ink-900); }

.dp-btn--sm { padding: 8px 15px; font-size: 13px; }
.dp-btn--sm .material-icons { font-size: 16px; }
.dp-btn--block { display: flex; width: 100%; justify-content: center; }

/* Bring the template's own buttons into the same shape, so the admin screens
   (untouched markup) don't look like a different product. */
.btn,
.btn.btn-round {
  border-radius: var(--dp-r-pill);
  text-transform: none;
  font-family: var(--dp-font);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .005em;
  padding: 10px 20px;
  box-shadow: var(--dp-shadow-sm);
}

.btn.btn-primary,
.btn.btn-success,
.btn.btn-info {
  background: var(--dp-brand-gradient);
  box-shadow: var(--dp-shadow-brand);
  color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-info:hover {
  background: var(--dp-brand-gradient);
  box-shadow: 0 14px 30px -10px rgba(69, 165, 102, .68);
  color: #fff;
}

/* Outline variants — the shared region switcher
   (layouts/partials/region-filter.blade.php) renders its inactive options as
   .btn-outline-info on five admin screens, which came out cyan next to the
   green active pill. */
.btn.btn-outline-info,
.btn.btn-outline-primary,
.btn.btn-outline-success {
  background: transparent;
  border: 1px solid var(--dp-line);
  color: var(--dp-ink-600);
  box-shadow: none;
}

.btn.btn-outline-info:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-success:hover {
  background: var(--dp-brand-soft);
  border-color: rgba(69, 165, 102, .45);
  color: var(--dp-brand-700);
}

.btn.btn-danger { background: var(--dp-danger); box-shadow: 0 8px 18px -8px rgba(207, 64, 69, .6); }
.btn.btn-secondary { background: var(--dp-surface); color: var(--dp-ink-700); border: 1px solid var(--dp-line); }
.btn.btn-link { box-shadow: none; background: transparent; }
.btn.btn-sm { padding: 7px 14px; font-size: 12.5px; }


/* 11. Tables, forms, modals ================================================ */

.table > thead > tr > th {
  border-bottom: 1px solid var(--dp-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dp-ink-400);
  padding: 12px 8px;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--dp-line-soft);
  padding: 14px 8px;
  font-size: 14px;
  color: var(--dp-ink-700);
  vertical-align: middle;
}

.table > tbody > tr:hover { background: var(--dp-surface-alt); }
.table > tbody > tr:first-child > td { border-top: 0; }

.form-group .form-control,
.form-control {
  border-radius: var(--dp-r-sm);
  border: 1px solid var(--dp-line);
  background-image: none;
  background-color: var(--dp-surface);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--dp-ink-900);
  height: auto;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus {
  border-color: var(--dp-brand-500);
  box-shadow: 0 0 0 3px var(--dp-brand-soft);
  background-image: none;
}

.form-group label,
label.control-label,
.bmd-label-static {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dp-ink-500);
  letter-spacing: .01em;
}

.modal-content {
  border: 0;
  border-radius: var(--dp-r-lg);
  box-shadow: var(--dp-shadow-lg);
  overflow: hidden;
}

.modal-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--dp-line-soft);
}

.modal-header .modal-title {
  font-family: var(--dp-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dp-ink-900);
}

.modal-body { padding: 20px 24px; }
.modal-footer { padding: 14px 24px 20px; border-top: 1px solid var(--dp-line-soft); }


/* 12. Alerts & empty states ================================================ */

.alert,
.dp-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--dp-r-md);
  box-shadow: none;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
}

.alert .material-icons,
.dp-alert .material-icons { font-size: 20px; flex: 0 0 20px; margin-top: 1px; }

/* Doubled class (.alert.alert-warning) to out-specify the Material template,
   which styles these as saturated full-colour blocks with a coloured shadow.
   A single-class rule here loses, and the soft tint never applies. */
.alert.alert-success, .dp-alert--success { background: var(--dp-success-soft); border-color: rgba(46, 158, 91, .3); color: #1D6B3D; box-shadow: none; }
.alert.alert-danger, .dp-alert--danger { background: var(--dp-danger-soft); border-color: rgba(207, 64, 69, .3); color: #9B2B2F; box-shadow: none; }
.alert.alert-warning, .dp-alert--warning { background: var(--dp-warning-soft); border-color: rgba(185, 130, 14, .3); color: #7C570A; box-shadow: none; }
.alert.alert-info, .dp-alert--info { background: var(--dp-info-soft); border-color: rgba(44, 123, 229, .28); color: #1E5AAA; box-shadow: none; }

/* The template also colours the text and any nested icon white. */
.alert.alert-success, .alert.alert-danger, .alert.alert-warning, .alert.alert-info { text-shadow: none; }
.alert .material-icons { color: inherit; }
.alert a { color: inherit; text-decoration: underline; }

.alert .close { color: inherit; opacity: .5; }

/* Empty state — replaces the bare grey <p> the list pages used. An empty page
   should still say what the page is for and where to go next. */
.dp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 28px;
  background: var(--dp-surface);
  border: 1px dashed #D6E0DA;
  border-radius: var(--dp-r-lg);
}

.dp-empty__icon {
  width: 62px;
  height: 62px;
  border-radius: var(--dp-r-lg);
  background: var(--dp-brand-soft);
  color: var(--dp-brand-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.dp-empty__icon .material-icons { font-size: 30px; }

.dp-empty__title {
  font-family: var(--dp-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dp-ink-900);
  margin: 0 0 7px;
}

.dp-empty__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dp-ink-400);
  max-width: 46ch;
  margin: 0 0 20px;
}

.dp-empty__text:last-child { margin-bottom: 0; }


/* 13. Auth / login ========================================================= */

.login-page .card-login,
.off-canvas-sidebar .card-login {
  border-radius: var(--dp-r-lg);
  border: 0;
  box-shadow: var(--dp-shadow-lg);
  /* No overflow:hidden — the header below is deliberately raised past the card's
     top edge with a negative margin, and clipping it cuts the title in half. */
}

/* Restores the template's raised-header look, which the flatter radii above had
   collapsed flush into the card's top edge with the title touching it. */
.login-page .card-login .card-header {
  background: var(--dp-brand-gradient) !important;
  box-shadow: var(--dp-shadow-brand) !important;
  border-radius: var(--dp-r-md);
  margin: -24px 20px 0;
  padding: 20px 16px;
}

.login-page .card-login .card-header .card-title {
  font-family: var(--dp-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

/* The template's guest header lays a flat black filter over a stock desk photo.
   Warmed toward the brand and taken much darker: at the template's original
   opacity the photo is the subject and the headline competes with it. Dark
   enough, the same image reads as texture behind the brand instead. */
.page-header.login-page:before,
.page-header.header-filter:before {
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(46, 133, 88, .38) 0%, rgba(46, 133, 88, 0) 60%),
    linear-gradient(135deg, rgba(6, 15, 10, .96) 0%, rgba(9, 26, 18, .94) 50%, rgba(15, 46, 31, .93) 100%);
}

/* Sharpen the type over that darker field. */
.page-header.login-page .navbar .nav-link { color: rgba(255, 255, 255, .82) !important; }
.page-header.login-page .navbar .nav-link:hover { color: #fff !important; }


/* 14. Responsive =========================================================== */

@media (max-width: 991px) {
  .main-panel { width: 100%; }
  .main-panel > .content { padding: 18px 16px 32px; }
  .main-panel > .navbar { padding: 12px 16px; }

  .dp-row,
  .dp-row--2,
  .dp-row--3 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .dp-row__ident { grid-column: 1 / -1; }
  .dp-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 575px) {
  .dp-page-head { align-items: flex-start; }
  .dp-page-head__title { font-size: 23px; }
  .dp-row,
  .dp-row--2,
  .dp-row--3 { grid-template-columns: 1fr; padding: 16px 18px; }
  .dp-segment { width: 100%; }
  .dp-segment > a { flex: 1 1 0; justify-content: center; padding: 9px 10px; }
  .dp-stat__value { font-size: 28px; }
  .dp-footer { flex-direction: column; align-items: flex-start; }
}

/* Respect reduced-motion: every transform above is decorative. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .dp-product:hover,
  a.dp-stat:hover,
  .dp-btn:hover { transform: none; }
}