/* ==========================================================
   COREGRID CMMS — UTILITY CLASSES
   Small reusable helpers built on the design tokens.
   ========================================================== */

/* Brand text helpers */
.text-navy     { color: var(--cg-navy); }
.text-teal     { color: var(--cg-teal); }
.text-cerulean { color: var(--cg-cerulean); }
.text-steel    { color: var(--cg-steel); }
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger); }
.text-muted    { color: var(--color-text-muted); }
.text-soft     { color: var(--color-text-soft); }

/* Brand backgrounds */
.bg-navy       { background: var(--cg-navy); }
.bg-teal       { background: var(--cg-teal); }
.bg-elevated   { background: var(--color-bg-elevated); }
.bg-subtle     { background: var(--color-bg-subtle); }
.bg-success    { background: var(--color-success-bg); }
.bg-warning    { background: var(--color-warning-bg); }
.bg-danger     { background: var(--color-danger-bg); }
.bg-info       { background: var(--color-info-bg); }

/* Typography helpers */
.font-serif    { font-family: var(--font-serif); }
.font-sans     { font-family: var(--font-sans); }
.font-mono     { font-family: var(--font-mono); }

.text-xs       { font-size: var(--text-xs); }
.text-sm       { font-size: var(--text-sm); }
.text-base     { font-size: var(--text-base); }
.text-lg       { font-size: var(--text-lg); }
.text-xl       { font-size: var(--text-xl); }
.text-2xl      { font-size: var(--text-2xl); }
.text-3xl      { font-size: var(--text-3xl); }

.font-normal   { font-weight: var(--weight-normal); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* Spacing helpers (margin) */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Padding helpers */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* Display helpers */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.hidden        { display: none; }

/* Flex helpers */
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }

.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.flex-1     { flex: 1; }
.flex-wrap  { flex-wrap: wrap; }
.flex-col   { flex-direction: column; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Border radius helpers */
.rounded      { border-radius: var(--radius); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }

/* Shadows */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Visibility */
@media (max-width: 768px) {
    .hide-mobile  { display: none !important; }
    .show-mobile  { display: block !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
    .show-desktop { display: block !important; }
}

/* ==========================================================
   PRINT STYLES
   ========================================================== */
@media print {
    /* Hide UI chrome */
    .sidebar,
    .topbar,
    .scroll-top-btn,
    .sidebar-backdrop,
    .nav-toggle,
    .detail-header-actions,
    .info-card-action,
    .page-header-actions,
    .filter-bar-modern,
    .form-actions,
    .btn-modern,
    .info-banner,
    .welcome-actions,
    .sticky-action-bar,
    .pagination-modern {
        display: none !important;
    }

    /* Reset layout — no fixed sidebar on print */
    body, .app-shell, .main-content {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: black !important;
        display: block !important;
    }

    /* Reset cards/borders for cleaner printing */
    .info-card, .form-card, .table-card, .activity-card, .kpi-card-modern {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    /* Headings — keep readable */
    h1, h2, h3 {
        color: black !important;
        page-break-after: avoid;
    }

    /* Tables — keep rows together */
    table {
        page-break-inside: auto;
    }
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* Show all tab panels at once when printing */
    .tabs-modern .tab-nav {
        display: none !important;
    }
    .tabs-modern .tab-panel {
        display: block !important;
        page-break-before: always;
    }
    .tabs-modern .tab-panel:first-child {
        page-break-before: auto;
    }
    .tabs-modern .tab-panel::before {
        content: attr(data-print-title);
        display: block;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 12px;
        padding-bottom: 6px;
        border-bottom: 2px solid #333;
    }

    /* Links — show URL in parentheses for context */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 10px;
        color: #666;
    }
    /* But not for internal links — keeps things clean */
    a[href^="#"]:after,
    a[href^="javascript"]:after {
        content: "";
    }

    /* Status colors — convert to black bold for B&W printing */
    .badge-modern {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
}