/* ============================================
   LegalYes Design System v1.0
   CSS Variables + Base Typography + Reset
   Layout stability (CLS): search/filter empty states, tab panes — see
   .cursor/rules/ui-rules/cursor-ui-design-principles.mdc (Layout Stability).
   ============================================ */

:root {
    /* Primary */
    --primary: #4361ee;
    --primary-light: #eef0ff;
    --primary-hover: #3651d4;
    --primary-dark: #2d46c5;

    /* Text */
    --text-primary: #1a1a2e;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-white: #ffffff;
    --text-light: rgba(255,255,255,0.85); /* sidebar menu text */

    /* Borders */
    --border: #e5e7eb;
    --border-light: #f3f4f6;

    /* Backgrounds */
    --bg-page: #f8f9fc;
    --bg-card: #ffffff;
    --bg-sidebar: #0f172a;
    --bg-sidebar-end: #1e293b;
    --bg-sidebar-hover: rgba(255,255,255,0.08);
    --text-on-dark: #f1f5f9;
    --hover-bg: #f9fafb;

    /* Status Colors */
    --success: #059669;
    --success-light: #ecfdf5;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --info: #3b82f6;
    --info-light: #eff6ff;

    /* Document Type Colors */
    --doc-important: #dc2626;
    --doc-our-work: #7c3aed;
    --doc-correspondence: #2563eb;
    --doc-client: #059669;
    --doc-misc: #9ca3af;

    /* Folder Color */
    --folder-color: #f59e0b;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.12);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed: 64px;
    --header-height: 56px;

    /* Document Details V2 — max width for each tab pane content column */
    --document-details-v2-pane-max-width: 900px;

    /* Document workflow task (TDM Details) — centered column, gutters on large screens */
    --tenant-tdm-readable-max-width: 1200px;
    --tenant-tdm-readable-padding: 10px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;

    /* Links */
    --link-color: var(--text-primary);
    --link-hover-color: var(--text-primary);
    --link-shadow: 0 1px 2px rgba(0,0,0,0.15);
    --link-shadow-hover: 0 1px 4px rgba(0,0,0,0.25);
    --link-inline-color: var(--primary);
    --link-inline-shadow: 0 1px 2px rgba(67,97,238,0.2);
    --link-inline-shadow-hover: 0 1px 4px rgba(67,97,238,0.3);

    /* Modal overlay (Bootstrap 5: .modal-backdrop uses these) — higher contrast than default #000 / 0.5 */
    --bs-backdrop-bg: #0f172a;
    --bs-backdrop-opacity: 0.62;

    /* Icon-only controls: default grid size + touch target; center with inline-flex + align/justify (see .btn-icon) */
    --ds-icon-btn-size: 36px;
    --ds-icon-btn-size-touch: 44px;
    --ds-icon-font-size: 0.85rem;

    /* Bootstrap alignment */
    --bs-primary: var(--primary);
    --bs-success: var(--success);
    --bs-danger: var(--danger);
    --bs-warning: var(--warning);
    --bs-info: var(--info);
    --bs-link-color: var(--text-primary);
    --bs-link-hover-color: var(--text-primary);
}

/* ============================================
   BOOTSTRAP UTILITY OVERRIDES → DS
   Map Bootstrap utilities to DS variables
   ============================================ */

/* Modal backdrop — enforce DS contrast (Bootstrap uses --bs-backdrop-bg + opacity on .show) */
.modal-backdrop {
    background-color: var(--bs-backdrop-bg) !important;
}

/* Shadows */
.shadow-sm, .ds-shadow { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Text colors — remap to DS */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Background colors — remap to DS */
.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }

/* Buttons — remap to DS colors */
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-info { background-color: var(--info); border-color: var(--info); }

.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background-color: var(--success); border-color: var(--success); color: #fff; }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-warning { color: var(--warning); border-color: var(--warning); }
.btn-outline-warning:hover { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--border); }
.btn-outline-secondary:hover { background-color: var(--hover-bg); color: var(--text-primary); }

/* Border radius — DS values */
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg, .rounded-3 { border-radius: var(--radius-lg) !important; }

/* ============================================
   CURSOR RULES — DS Standard
   pointer: all interactive elements
   default: static content, disabled
   not-allowed: disabled states
   grab: draggable items
   ============================================ */

/* Interactive elements — pointer */
a, button, [role="button"], [role="tab"], [role="menuitem"],
label[for], .btn, .nav-link, .dropdown-item, .dropdown-toggle,
.page-link, .form-check-label, .form-select,
.clickable, .menu-link, .submenu-link, .menu-group-header,
.sidebar-toggle, .recent-tab, .search-result-item,
[onclick], [data-bs-toggle], [data-bs-dismiss], [data-action],
.accordion-button, .list-group-item-action,
.card.clickable, tr.clickable, .badge[onclick] {
    cursor: pointer;
}

/* Disabled states — not-allowed */
.disabled, :disabled, [aria-disabled="true"],
.btn:disabled, .btn.disabled,
.nav-link.disabled, .page-link.disabled,
.form-control:disabled, .form-select:disabled,
.form-check-input:disabled {
    cursor: not-allowed !important;
    pointer-events: auto;
}

/* Text inputs — text cursor */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="tel"],
input[type="number"], input[type="date"], input[type="datetime-local"],
textarea, .form-control:not(:disabled), [contenteditable="true"] {
    cursor: text;
}

/* Drag handles */
.drag-handle, [draggable="true"], .sortable-handle {
    cursor: grab;
}
.drag-handle:active, [draggable="true"]:active, .sortable-handle:active {
    cursor: grabbing;
}

/* Resize */
.resize-handle { cursor: col-resize; }

/* Help — info tooltips */
[title]:not(button):not(a):not(.btn):not(input),
abbr[title], .tooltip-trigger {
    cursor: help;
}

/* Nested [title] inside real controls: DS rule above matches inner spans (e.g. sidebar labels), not only <a> */
a [title],
button [title],
[role="button"] [title],
.btn [title],
.nav-link [title] {
    cursor: pointer;
}

/* Sidebar: star badge / counters use [title] on i or span inside links — must beat global [title] { cursor: help } */
aside.sidebar .menu-link [title],
aside.sidebar .submenu-link [title],
aside.sidebar .sidebar-menu i[title],
aside.sidebar .sidebar-menu span[title] {
    cursor: pointer;
}

/* Recent tasks/sections: rows are div.recent-item[title] for native tooltip — beat global [title] { cursor: help } */
aside.sidebar .sidebar-recent .recent-item {
    cursor: pointer;
}

/* Block “Останні”: same surface as sidebar (panel-system had rgba(0,0,0,.05) strip) */
aside.sidebar#sidebar .sidebar-recent,
aside#sidebar .sidebar-recent {
    background: transparent;
}

/* Main header page title: JS sets [title] when truncated — must beat [title]:not(...) { cursor: help } (0,2,3) */
header.top-header .header-left h1.page-title,
.top-header .header-left h1.page-title {
    cursor: default;
}

/* Wait — loading */
.loading, .spinner-border, .spinner-grow {
    cursor: wait;
}

/* Global link styles — text color + shadow, no underline */
a {
    color: var(--link-color);
    text-decoration: none;
    text-shadow: var(--link-shadow);
    transition: all var(--transition-fast);
}
a:hover {
    color: var(--link-hover-color);
    text-shadow: var(--link-shadow-hover);
    text-decoration: none;
}

/* Sidebar brand is an <a> on dark chrome — global a/a:hover would use dark body text */
aside.sidebar#sidebar a.sidebar-brand,
aside#sidebar a.sidebar-brand {
    color: var(--text-on-dark);
    text-shadow: none;
}

aside.sidebar#sidebar a.sidebar-brand:hover,
aside.sidebar#sidebar a.sidebar-brand:focus-visible,
aside#sidebar a.sidebar-brand:hover,
aside#sidebar a.sidebar-brand:focus-visible {
    color: var(--text-white);
    text-shadow: none;
    text-decoration: none;
}

/* ============================================
   BASE RESET
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--bg-page);
    line-height: 1.5;
    min-height: 100vh;
}

/* Base link reset (handled by global styles above) */

/* ============================================
   TYPOGRAPHY
   ============================================ */
.text-h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.text-h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.text-h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.text-body { font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--text-primary); }
.text-small { font-size: 0.9rem; font-weight: 400; color: var(--text-secondary); }
.text-muted { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.text-label {
    font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
/* Standalone link — same color as text, shadow only */
.text-link {
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    text-shadow: var(--link-shadow);
    transition: all var(--transition-fast);
}
.text-link:hover {
    text-shadow: var(--link-shadow-hover);
    text-decoration: none;
}

/* Inline link inside text — primary color + shadow to stand out */
.text-link-inline, p a, .text-body a, td a, li a, span a {
    color: var(--link-inline-color);
    text-decoration: none;
    text-shadow: var(--link-inline-shadow);
    transition: all var(--transition-fast);
}
.text-link-inline:hover, p a:hover, .text-body a:hover, td a:hover, li a:hover, span a:hover {
    color: var(--primary-hover);
    text-shadow: var(--link-inline-shadow-hover);
    text-decoration: none;
}

/* Breadcrumb override - bigger, darker */
.breadcrumb-ly { font-size: 0.93rem; color: var(--text-primary); }
.breadcrumb-ly a { color: var(--primary); font-weight: 500; text-shadow: var(--link-inline-shadow); }
.breadcrumb-ly a:hover { text-shadow: var(--link-inline-shadow-hover); }
.breadcrumb-ly .sep { color: var(--text-secondary); }
.breadcrumb-ly .current { font-weight: 600; color: var(--text-primary); }

/* ============================================
   App footer — light theme: dark bar (sidebar palette)
   Dark theme overrides in design-system-dark.css
   ============================================ */
footer.footer#footer,
.footer {
    background: linear-gradient(to left, var(--bg-sidebar) 0%, var(--bg-sidebar-end) 100%);
    color: var(--text-on-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.footer a:not(.btn):not(.badge) {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    text-shadow: none;
}

.footer a:not(.btn):not(.badge):hover {
    color: var(--text-white);
}

.footer .footer-brand-title {
    color: var(--text-white);
    font-weight: 600;
}

.footer .footer-brand-title i {
    color: var(--primary);
}

.footer .footer-section-title {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
}

.footer .footer-tagline {
    color: rgba(255, 255, 255, 0.7);
}

.footer .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}

.footer .text-primary {
    color: var(--primary) !important;
}

.footer hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 1;
    background: transparent;
}

.footer .social-links a {
    color: rgba(255, 255, 255, 0.78);
}

.footer .social-links a:hover {
    color: var(--text-white);
}

.footer .footer-social-links .footer-social-item {
    color: rgba(255, 255, 255, 0.78);
}

.footer .footer-social-links .footer-social-item:hover,
.footer .footer-social-links .footer-social-item:focus-visible {
    color: var(--text-white);
}

.footer .footer-social-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

.footer .footer-social-text {
    font-size: 0.875rem;
    font-weight: 500;
    word-break: break-word;
}

.footer .footer-social-icons a {
    color: rgba(255, 255, 255, 0.78);
}

.footer .footer-social-icons a:hover,
.footer .footer-social-icons a:focus-visible {
    color: var(--text-white);
}

.footer .footer-phone-reveal-btn {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
}

.footer .footer-phone-reveal-btn:hover,
.footer .footer-phone-reveal-btn:focus-visible {
    color: var(--text-white);
    text-decoration: none;
}

/* mailto + revealed tel: — no underline; mailto opens default email client */
.footer .footer-contact-mailto,
.footer .footer-phone-widget a {
    text-decoration: none !important;
}

.footer .footer-contact-mailto:hover,
.footer .footer-contact-mailto:focus-visible,
.footer .footer-phone-widget a:hover,
.footer .footer-phone-widget a:focus-visible {
    text-decoration: none !important;
    color: var(--text-white);
}

.footer .footer-toggle {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: none;
}

.footer .footer-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.38);
    color: var(--text-white);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    /* Force light colors for print */
    :root {
        --text-primary: #1a1a2e !important;
        --text-secondary: #6b7280 !important;
        --bg-page: #fff !important;
        --bg-card: #fff !important;
        --border: #e5e7eb !important;
    }
    /* Hide sidebar, header, footer */
    .sidebar, .header, .app-header, footer,
    .sidebar-toggle, #themeToggle,
    .no-print, .btn-print-hide { display: none !important; }
    /* Full width content */
    .main-content, .content-area { 
        margin-left: 0 !important; 
        padding: 0 !important;
        width: 100% !important;
    }
    /* Remove shadows and borders */
    .card, .ds-card { 
        box-shadow: none !important; 
        border: 1px solid #ddd !important;
    }
    /* Ensure readable text */
    body, p, span, td, th, li { color: #000 !important; }
    a { color: #000 !important; text-decoration: underline !important; text-shadow: none !important; }
    /* Page breaks */
    .page-break-before { page-break-before: always; }
    .page-break-after { page-break-after: always; }
    .no-page-break { page-break-inside: avoid; }
    /* Badges readable */
    .badge { border: 1px solid #999 !important; }
}