/*
 * dkmone's own additions on top of the Conca theme (public/vendor/conca).
 * Conca's compiled bootstrap.css/conca.css stay untouched apart from one
 * documented patch (see docs/design-conca.md) — everything dkmone-specific
 * lives here so re-copying a newer Conca build never overwrites it.
 */

/* Inter, self-hosted. Conca's bootstrap.css used to @import this from
   fonts.googleapis.com; that import was removed from our copy so a network
   that blocks Google can't stall the first paint. Latin subset only —
   Indonesian text never leaves it. Variable font: one file, every weight. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
}

/* ---- shell ------------------------------------------------------------ */
/* Same mark-beside-wordmark pattern as the ERP's own sidebar brand (components/brand-logo
   in C:\Project\Web\erp) — icon on the left, name + tagline stacked to its right. */
.app-sidebar-logo { display: inline-flex; align-items: center; gap: .77rem; text-decoration: none; color: #1C2333; }
.brand-logo-mark { height: 42px; width: 42px; border-radius: 11px; flex-shrink: 0; }
.brand-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-logo-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: inherit; }
.brand-logo-tagline { margin-top: 2px; font-size: .62rem; font-weight: 400; letter-spacing: .02em; color: #6B7280; line-height: 1.25; }
[data-bs-theme="dark"] .app-sidebar-logo { color: #E5E7EB; }
[data-bs-theme="dark"] .brand-logo-tagline { color: #9CA3AF; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex-shrink: 0; background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary); }
.avatar-initials.sm { width: 30px; height: 30px; font-size: .68rem; }
.avatar-initials.md { width: 38px; height: 38px; font-size: .8rem; }
.avatar-initials.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.ci { flex-shrink: 0; vertical-align: -3px; }

/* ---- login ------------------------------------------------------------ */
.login-banner { width: 100%; max-width: 260px; height: auto; border-radius: .75rem; }
.password-toggle { cursor: pointer; user-select: none; }

/* ---- portal ----------------------------------------------------------- */
.portal-group-title { letter-spacing: .06em; font-size: .78rem; background-color: var(--dkm-blue-dark) !important; }
.portal-group hr { border-color: var(--dkm-blue-dark); opacity: .35; }
.portal-card { position: relative; color: var(--bs-body-color); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.portal-card:hover { color: var(--bs-body-color); transform: translateY(-3px); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12); }
.portal-card.is-critical { border: 2px solid var(--bs-danger); }
.portal-card.is-locked { opacity: .6; cursor: not-allowed; }
.portal-card.is-locked:hover { transform: none; box-shadow: none; }
.portal-card.is-locked .portal-icon { filter: grayscale(1); }
.portal-icon { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; }
.portal-icon-letter { display: flex; align-items: center; justify-content: center; margin: 0 auto; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-weight: 700; font-size: 1.7rem; }
.portal-name { line-height: 1.3; font-size: .85rem; }
.portal-badge { position: absolute; top: -9px; z-index: 1; font-size: .6rem; letter-spacing: .03em; }
.portal-badge-left { left: -8px; }
.portal-badge-right { right: -8px; }
.portal-dot { position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }

/* Admin tables: Conca cell padding is generous; tighten so 8-9 column lists fit without a horizontal scroll. */
.admin-table > :not(caption) > * > * { padding: .65rem .6rem; }
.admin-table th { white-space: nowrap; }

/* DKM brand blue (same as dkmapps.com: header #1d4ed8, group labels #1e3a8a). Top bar is blue in every DKM app; keep in sync across apps. */
:root { --dkm-blue: #1d4ed8; --dkm-blue-dark: #1e3a8a; }
.app-header,
.app-header.bg-card { background-color: var(--dkm-blue) !important; border-bottom: 0; box-shadow: 0 1px 4px rgba(0, 40, 90, .25); }
.app-header,
.app-header .text-custom-body,
.app-header .header-nav-link,
.app-header .header-nav-link .ci { color: #fff !important; }
.app-header .app-header-bar-btn span { background-color: #fff !important; }
.app-header .header-nav-link:hover { background-color: rgba(255, 255, 255, .15); }
.app-header .avatar-initials { background: #fff; color: var(--dkm-blue); }

/* Admin tables: header row clearly distinct from the data rows. */
.admin-table thead th {
  background-color: rgba(var(--bs-primary-rgb), .08);
  color: var(--dkm-blue-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--dkm-blue);
}
.admin-table thead th:first-child { border-top-left-radius: .5rem; }
.admin-table thead th:last-child { border-top-right-radius: .5rem; }
.admin-table tbody tr:hover > * { background-color: rgba(var(--bs-primary-rgb), .04); }
[data-bs-theme="dark"] .admin-table thead th { color: #93c5fd; }

/* ID | EN language switcher (works on the blue top bar and on the plain login page) */
.locale-switcher { gap: 2px; border: 1px solid rgba(var(--bs-primary-rgb), .35); border-radius: .5rem; padding: 2px; }
.locale-btn { border: 0; background: transparent; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .55rem; border-radius: .35rem; color: var(--dkm-blue); cursor: pointer; }
.locale-btn:hover { background: rgba(var(--bs-primary-rgb), .12); }
.locale-btn.is-active { background: var(--dkm-blue); color: #fff; }
.app-header .locale-switcher { border-color: rgba(255, 255, 255, .5); }
.app-header .locale-btn { color: #fff; }
.app-header .locale-btn:hover { background: rgba(255, 255, 255, .15); }
.app-header .locale-btn.is-active { background: #fff; color: var(--dkm-blue); }