/* =========================================================================
   Dewaan Mansion - UI theme layer
   -------------------------------------------------------------------------
   Loaded AFTER argon-dashboard.css. Purely presentational: it re-skins the
   existing markup (cards, tables, buttons, forms, sidebar, navbar) and adds
   the small set of .dm-* components used by partials/sidebar.php,
   partials/navbar.php and the login screen. No markup or behaviour depends
   on this file, so it can be removed at any time without breaking a page.
   ========================================================================= */

:root {
  --dm-primary-1: #4f46e5;
  --dm-primary-2: #7c3aed;
  --dm-primary-3: #a855f7;
  --dm-gold-1: #f59e0b;
  --dm-gold-2: #d97706;
  --dm-success-1: #10b981;
  --dm-success-2: #059669;
  --dm-info-1: #0ea5e9;
  --dm-info-2: #0284c7;
  --dm-danger-1: #f43f5e;
  --dm-danger-2: #e11d48;
  --dm-dark-1: #334155;
  --dm-dark-2: #1e293b;

  --dm-ink: #1f2544;
  --dm-body: #667085;
  --dm-muted: #98a2b3;
  --dm-line: #eaecf5;
  --dm-surface: #ffffff;
  --dm-canvas: #f4f6fb;

  --dm-radius-sm: 10px;
  --dm-radius: 16px;
  --dm-radius-lg: 22px;

  --dm-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --dm-shadow-sm: 0 2px 6px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --dm-shadow: 0 12px 28px -12px rgba(31, 37, 68, .18), 0 4px 10px -6px rgba(31, 37, 68, .10);
  --dm-shadow-lg: 0 26px 50px -18px rgba(31, 37, 68, .28), 0 10px 20px -12px rgba(31, 37, 68, .16);

  --dm-grad-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
  --dm-grad-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
  --dm-grad-success: linear-gradient(135deg, #34d399 0%, #10b981 55%, #059669 100%);
  --dm-grad-info: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 55%, #0284c7 100%);
  --dm-grad-danger: linear-gradient(135deg, #fb7185 0%, #f43f5e 55%, #e11d48 100%);
  --dm-grad-dark: linear-gradient(135deg, #475569 0%, #334155 55%, #1e293b 100%);
}

/* -------------------------------------------------------------------------
   1. Canvas & typography
   ------------------------------------------------------------------------- */
body {
  background-color: var(--dm-canvas) !important;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(124, 58, 237, .10), transparent 62%),
    radial-gradient(900px 460px at 92% 4%, rgba(14, 165, 233, .09), transparent 60%);
  background-attachment: fixed;
  color: var(--dm-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--dm-ink);
  letter-spacing: -.015em;
}

/* The full-bleed banner behind the navbar on every inner page.
   It fades into the page background instead of ending on a hard edge. */
.min-height-300.bg-primary {
  background: var(--dm-grad-primary) !important;
  min-height: 300px !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

/* Pages that use the photo header keep the photo but get the brand tint. */
.position-absolute.min-height-300 > .mask.bg-primary {
  background: var(--dm-grad-primary) !important;
  opacity: .78 !important;
}

/* Prettier scrollbars (WebKit) */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd2e6 transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #cbd2e6;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #aeb7d4; background-clip: padding-box; }

/* -------------------------------------------------------------------------
   2. Sidebar
   ------------------------------------------------------------------------- */
.sidenav.dm-sidenav {
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: var(--dm-radius-lg) !important;
  box-shadow: var(--dm-shadow-lg);
  overflow-y: auto;
  overflow-x: hidden;
}

.dm-sidenav .sidenav-header { height: auto; padding: 1.25rem 1rem .75rem; }

.dm-brand {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  padding: 0 !important;
  text-decoration: none;
}

.dm-brand__logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(31, 37, 68, .55);
  border: 1px solid var(--dm-line);
}
.dm-brand__logo img { width: 100%; height: 100%; object-fit: cover; }

.dm-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.dm-brand__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--dm-ink);
  letter-spacing: -.01em;
}
.dm-brand__subtitle {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dm-muted);
}

.dm-sidenav__rule { opacity: .55; }

.dm-sidenav__user {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 1rem 1rem;
  padding: .7rem .8rem;
  border-radius: var(--dm-radius);
  background: linear-gradient(135deg, rgba(79, 70, 229, .08), rgba(168, 85, 247, .08));
  border: 1px solid rgba(124, 58, 237, .14);
}
.dm-sidenav__user-meta { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.dm-sidenav__user-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--dm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 128px;
}

/* Nav items */
.dm-sidenav .navbar-nav { padding: 0 .75rem 1rem; gap: .15rem; }

.dm-sidenav .nav-link {
  display: flex;
  align-items: center;
  padding: .62rem .7rem !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dm-body) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.dm-sidenav .nav-link:hover {
  background: rgba(79, 70, 229, .07) !important;
  color: var(--dm-ink) !important;
  transform: translateX(2px);
}

.dm-sidenav .nav-link.active {
  background: var(--dm-grad-primary) !important;
  color: #fff !important;
  box-shadow: 0 12px 22px -12px rgba(99, 63, 226, .95) !important;
}
.dm-sidenav .nav-link.active .nav-link-text { color: #fff !important; }
.dm-sidenav .nav-link.active .dm-nav-icon {
  background: rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
}
.dm-sidenav .nav-link.active .dm-nav-icon i { color: #fff !important; }

.dm-nav-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px !important;
  box-shadow: var(--dm-shadow-xs);
  transition: transform .18s ease;
}
.dm-sidenav .nav-link:hover .dm-nav-icon { transform: scale(1.06); }

.dm-nav-icon i { color: #fff !important; }
.dm-nav-icon--primary   { background: var(--dm-grad-primary); }
.dm-nav-icon--warning   { background: var(--dm-grad-gold); }
.dm-nav-icon--success   { background: var(--dm-grad-success); }
.dm-nav-icon--info      { background: var(--dm-grad-info); }
.dm-nav-icon--danger    { background: var(--dm-grad-danger); }
.dm-nav-icon--dark      { background: var(--dm-grad-dark); }
.dm-nav-icon--logout    { background: linear-gradient(135deg, #94a3b8, #64748b); }

.dm-nav-link--logout { color: var(--dm-danger-2) !important; }
.dm-nav-link--logout:hover { background: rgba(244, 63, 94, .08) !important; color: var(--dm-danger-2) !important; }

/* -------------------------------------------------------------------------
   3. Top navbar
   ------------------------------------------------------------------------- */
.dm-navbar .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .55); }
.dm-navbar .breadcrumb-item.active { font-weight: 600; }
.dm-navbar h6 { font-size: 1.05rem; letter-spacing: -.02em; }

.dm-navbar__clock {
  font-weight: 600;
  opacity: .85;
  letter-spacing: .01em;
}

.dm-userchip {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  padding: .3rem .55rem .3rem .3rem !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background-color .18s ease, transform .18s ease;
}
.dm-userchip:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.dm-userchip__meta { flex-direction: column; line-height: 1.1; text-align: left; }
.dm-userchip__name { color: #fff; font-size: .78rem; font-weight: 700; }
.dm-userchip__role { color: rgba(255, 255, 255, .75); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

.dm-dropdown {
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius) !important;
  box-shadow: var(--dm-shadow-lg) !important;
  min-width: 250px;
}
.dm-dropdown .dropdown-item { border-radius: 10px; padding: .55rem .75rem; }
.dm-dropdown .dropdown-item:hover { background: rgba(244, 63, 94, .08); }

/* -------------------------------------------------------------------------
   4. Avatars & role chips
   ------------------------------------------------------------------------- */
.dm-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px -10px rgba(31, 37, 68, .8);
}
.dm-avatar--sm { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; font-size: .82rem; }
.dm-avatar--admin     { background: var(--dm-grad-primary); }
.dm-avatar--quotation { background: var(--dm-grad-gold); }
.dm-avatar--user      { background: var(--dm-grad-info); }

.dm-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.5;
}
.dm-chip--admin     { background: rgba(124, 58, 237, .12); color: #6d28d9; }
.dm-chip--quotation { background: rgba(245, 158, 11, .16); color: #b45309; }
.dm-chip--user      { background: rgba(14, 165, 233, .14); color: #0369a1; }
.dm-chip--danger    { background: rgba(244, 63, 94, .13);  color: #be123c; }
.dm-chip--success   { background: rgba(16, 185, 129, .14); color: #047857; }

/* -------------------------------------------------------------------------
   4b. Confirmation modals (cancel / restore / delete)
   ------------------------------------------------------------------------- */
.dm-confirm {
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 40px 80px -30px rgba(15, 12, 45, .55) !important;
}

.dm-confirm__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
}
.dm-confirm__icon--warning { background: var(--dm-grad-gold);    box-shadow: 0 16px 30px -14px rgba(245, 158, 11, .9); }
.dm-confirm__icon--danger  { background: var(--dm-grad-danger);  box-shadow: 0 16px 30px -14px rgba(244, 63, 94, .9); }
.dm-confirm__icon--success { background: var(--dm-grad-success); box-shadow: 0 16px 30px -14px rgba(16, 185, 129, .9); }

.dm-confirm__details {
  background: #f7f8fc;
  border: 1px solid var(--dm-line);
  border-radius: 14px;
  padding: .35rem .9rem;
}
.dm-confirm__details:empty { display: none; }

.dm-confirm__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .45rem 0;
  font-size: .8rem;
}
.dm-confirm__row + .dm-confirm__row { border-top: 1px dashed #e2e5f0; }
.dm-confirm__row span { color: var(--dm-muted); }
.dm-confirm__row strong { color: var(--dm-ink); text-align: right; }

/* -------------------------------------------------------------------------
   4c. WhatsApp share button
   ------------------------------------------------------------------------- */
.dm-wa-btn {
  border: 0;
  background: transparent;
  line-height: 1;
  border-radius: 10px;
  padding: .35rem .6rem !important;
  transition: background-color .15s ease, transform .15s ease;
}
.dm-wa-btn:hover { background: rgba(37, 211, 102, .13); transform: translateY(-1px); }
.dm-wa-btn i { color: #25d366; }

.dm-wa-btn.is-sharing { pointer-events: none; opacity: .65; }
.dm-wa-btn.is-sharing i::before {
  content: "\f110"; /* fa-spinner */
  animation: dmSpin .8s linear infinite;
  display: inline-block;
}

/* -------------------------------------------------------------------------
   5. Cards
   ------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--dm-line) !important;
  border-radius: var(--dm-radius) !important;
  box-shadow: var(--dm-shadow) !important;
  background: var(--dm-surface);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}
.card:hover { box-shadow: var(--dm-shadow-lg) !important; }

.card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--dm-line);
  padding-bottom: 1rem !important;
}
.card > .card-header h6,
.card > .card-header p {
  color: var(--dm-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}
.card > .card-header h6 { font-size: .98rem; }

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

/* Accent rail on the left of a card header. */
.card > .card-header > .row > .col-6:first-child h6,
.card > .card-header .d-flex > p.mb-0 {
  position: relative;
  padding-left: .8rem;
}
.card > .card-header > .row > .col-6:first-child h6::before,
.card > .card-header .d-flex > p.mb-0::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.05em;
  border-radius: 999px;
  background: var(--dm-grad-primary);
}

/* Clickable stat tiles used on the dashboard. */
.cursor-pointer.card:hover,
.card.cursor-pointer:hover { transform: translateY(-4px); }

/* -------------------------------------------------------------------------
   6. Tables
   ------------------------------------------------------------------------- */
.table { color: var(--dm-body); margin-bottom: 0; }

.table > thead > tr > th,
.table thead th {
  background: linear-gradient(180deg, #f8f9fd 0%, #f2f4fa 100%);
  border-bottom: 1px solid var(--dm-line) !important;
  color: #5a6183 !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  letter-spacing: .075em;
  text-transform: uppercase;
  padding: .85rem .75rem;
  white-space: nowrap;
  opacity: 1 !important;
}

.table > tbody > tr { transition: background-color .15s ease, box-shadow .15s ease; }
.table > tbody > tr:nth-child(even) { background-color: #fbfcfe; }
.table > tbody > tr:hover { background-color: rgba(79, 70, 229, .055); }

.table > tbody > tr > td {
  border-bottom: 1px solid #f1f2f8 !important;
  padding: .78rem .75rem;
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }

.table td .text-secondary,
.table td span.text-xs {
  color: #4a5170 !important;
  font-size: .78rem !important;
}

.table-responsive { border-radius: 0 0 var(--dm-radius) var(--dm-radius); }

/* Row action links */
.table .btn-link {
  font-weight: 600;
  border-radius: 9px;
  padding: .3rem .6rem !important;
  transition: background-color .15s ease, transform .15s ease;
}
.table .btn-link:hover { background: rgba(79, 70, 229, .09); transform: translateY(-1px); }
.table .btn-link.text-danger:hover { background: rgba(244, 63, 94, .1); }
.table .btn-link.text-success:hover { background: rgba(16, 185, 129, .12); }

/* Inline controls inside table cells */
.table .form-select,
.table .form-control {
  min-width: 118px;
  font-size: .76rem;
  padding: .38rem .6rem;
  border-radius: 9px;
}

/* -------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------- */
.btn {
  border-radius: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: var(--dm-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(124, 58, 237, .35); outline-offset: 2px; }

.btn-primary,
.bg-gradient-primary.btn,
.btn.bg-gradient-primary {
  background-image: var(--dm-grad-primary) !important;
  border: 0 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn.bg-gradient-primary:hover { filter: brightness(1.06); }

.btn-dark, .btn.bg-gradient-dark {
  background-image: var(--dm-grad-dark) !important;
  border: 0 !important;
  color: #fff !important;
}
.btn-success, .btn.bg-gradient-success { background-image: var(--dm-grad-success) !important; border: 0 !important; color: #fff !important; }
.btn-info,    .btn.bg-gradient-info    { background-image: var(--dm-grad-info) !important;    border: 0 !important; color: #fff !important; }
.btn-warning, .btn.bg-gradient-warning { background-image: var(--dm-grad-gold) !important;    border: 0 !important; color: #fff !important; }
.btn-danger,  .btn.bg-gradient-danger  { background-image: var(--dm-grad-danger) !important;  border: 0 !important; color: #fff !important; }

.btn-link { box-shadow: none !important; }
.btn-link:hover { box-shadow: none !important; }

/* -------------------------------------------------------------------------
   8. Forms
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
  border: 1px solid #dfe3f0;
  border-radius: 11px;
  padding: .62rem .85rem;
  color: var(--dm-ink);
  background-color: #fff;
  box-shadow: var(--dm-shadow-xs);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-control::placeholder { color: #aab0c6; }
.form-control:focus,
.form-select:focus {
  border-color: var(--dm-primary-2);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .13);
  background-color: #fff;
}
.form-control:disabled, .form-control[readonly] { background-color: #f6f7fb; }

.form-control-label,
label.form-label,
.form-label {
  font-size: .74rem;
  font-weight: 700;
  color: #4a5170;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.form-check-input:checked {
  background-color: var(--dm-primary-1);
  border-color: var(--dm-primary-1);
}
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(124, 58, 237, .13); }

.input-group-text { border-radius: 11px; border-color: #dfe3f0; background: #f7f8fc; }

/* Status dropdowns in the quotation listing get colour coded borders. */
.status-dropdown { font-weight: 600; }

/* -------------------------------------------------------------------------
   9. Badges, alerts & misc
   ------------------------------------------------------------------------- */
.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .38em .72em;
}

.dm-alert {
  border: 0;
  border-radius: var(--dm-radius);
  font-size: .85rem;
  font-weight: 600;
  padding: .85rem 1.1rem;
  box-shadow: var(--dm-shadow-sm);
}
.dm-alert--warning { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }

.pagination .page-link { border-radius: 10px !important; margin: 0 .12rem; border-color: var(--dm-line); color: var(--dm-body); }
.pagination .page-item.active .page-link { background: var(--dm-grad-primary); border-color: transparent; color: #fff; }

hr.horizontal.dark { background-image: linear-gradient(90deg, transparent, rgba(31, 37, 68, .14), transparent); }

.footer { color: var(--dm-muted); }
.footer .nav-link { font-size: .78rem; }

/* The Creative Tim demo "Theme Configurator" panel is template promo
   material, not part of the product - keep it out of the way. */
.fixed-plugin { display: none !important; }

/* Dashboard digital clock */
#clock-container {
  background: linear-gradient(135deg, #312e81 0%, #1e1b4b 55%, #0f172a 100%) !important;
  border-radius: var(--dm-radius) !important;
  box-shadow: var(--dm-shadow) !important;
  border: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  overflow: hidden;
}
#clock-container::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .45), transparent 68%);
  pointer-events: none;
}
#digital-clock { letter-spacing: 3px !important; position: relative; }

/* Dashboard stat tiles - a coloured rail plus a lift on hover. */
.dm-stat { position: relative; }
.dm-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--dm-radius) 0 0 var(--dm-radius);
}
.dm-stat--primary::before { background: var(--dm-grad-primary); }
.dm-stat--success::before { background: var(--dm-grad-success); }
.dm-stat--info::before    { background: var(--dm-grad-info); }
.dm-stat--danger::before  { background: var(--dm-grad-danger); }

.dm-stat .numbers p { color: var(--dm-muted); font-size: .68rem !important; letter-spacing: .06em; }
.dm-stat .numbers h5 { font-size: 1.6rem; color: var(--dm-ink); }
.dm-stat:hover { transform: translateY(-4px); }
.dm-stat .icon.icon-shape { width: 48px; height: 48px; }

/* Upcoming bookings list */
.upcoming-bookings__list .list-group-item { background: transparent; }
.upcoming-bookings__list .list-group-item + .list-group-item { border-top: 1px solid #f1f2f8 !important; }

.dm-date-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 13px;
  background: linear-gradient(160deg, #f5f3ff, #ede9fe);
  border: 1px solid rgba(124, 58, 237, .18);
  line-height: 1;
}
.dm-date-pill__day { font-size: 1.05rem; font-weight: 700; color: #5b21b6; }
.dm-date-pill__mon { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #7c3aed; }

/* -------------------------------------------------------------------------
   10. Entrance animation
   ------------------------------------------------------------------------- */
@keyframes dmRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content .container-fluid > .row > [class*="col-"] > .card,
.main-content .container-fluid > .card {
  animation: dmRise .38s cubic-bezier(.2, .7, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .card:hover, .dm-sidenav .nav-link:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   11. Login / approval screens
   ------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(900px 620px at 80% 12%, rgba(168, 85, 247, .30), transparent 60%),
    radial-gradient(800px 560px at 12% 84%, rgba(14, 165, 233, .26), transparent 58%),
    linear-gradient(140deg, #241b4d 0%, #2f2266 45%, #1b1740 100%) !important;
  background-attachment: fixed;
}

.auth-card {
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 24px !important;
  box-shadow: 0 40px 80px -30px rgba(10, 6, 40, .7) !important;
  animation: dmRise .45s cubic-bezier(.2, .7, .3, 1) both;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.6rem;
}
.auth-brand__logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
  border: 2px solid rgba(255, 255, 255, .5);
}
.auth-brand__logo img { width: 100%; height: 100%; object-fit: cover; }
.auth-brand__title { color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1.1; margin: 0; }
.auth-brand__subtitle {
  color: rgba(255, 255, 255, .7);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}

.auth-title { font-size: 1.45rem; font-weight: 700; margin-bottom: .25rem; }
.auth-subtitle { color: var(--dm-muted); font-size: .85rem; margin-bottom: 1.5rem; }

.auth-field { position: relative; margin-bottom: 1rem; }
.auth-field .form-control {
  height: 50px;
  padding-left: 2.85rem;
  font-size: .92rem;
  border-radius: 13px;
}
.auth-field__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dm-muted);
  font-size: .95rem;
  pointer-events: none;
}
.auth-field__toggle {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dm-muted);
  background: none;
  border: 0;
  padding: .25rem;
  cursor: pointer;
  line-height: 1;
}
.auth-field__toggle:hover { color: var(--dm-primary-2); }

.auth-submit {
  height: 50px;
  border-radius: 13px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  background-image: var(--dm-grad-primary) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(99, 63, 226, .9) !important;
}

.auth-error {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(244, 63, 94, .09);
  color: #be123c;
  border: 1px solid rgba(244, 63, 94, .2);
  border-radius: 12px;
  padding: .65rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.auth-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 12px;
  padding: .65rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.auth-footnote { color: rgba(255, 255, 255, .55); font-size: .74rem; margin-top: 1.4rem; }

.auth-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid rgba(124, 58, 237, .18);
  border-top-color: var(--dm-primary-2);
  animation: dmSpin .9s linear infinite;
}
@keyframes dmSpin { to { transform: rotate(360deg); } }

.auth-status-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  color: #fff;
  font-weight: 700;
}
.auth-status-icon--ok  { background: var(--dm-grad-success); box-shadow: 0 16px 30px -14px rgba(16, 185, 129, .9); }
.auth-status-icon--bad { background: var(--dm-grad-danger);  box-shadow: 0 16px 30px -14px rgba(244, 63, 94, .9); }

/* -------------------------------------------------------------------------
   12. Responsive touches
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .sidenav.dm-sidenav { background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 767.98px) {
  .min-height-300.bg-primary { min-height: 260px !important; }
  .card > .card-header { padding-left: 1rem !important; padding-right: 1rem !important; }
  .table > thead > tr > th,
  .table > tbody > tr > td { padding-left: .55rem; padding-right: .55rem; }
  .dm-navbar h6 { font-size: .95rem; }
}