/**
 * projecteam-tools-ui — GLOBAL redesign rules for every logged-in screen.
 *
 * Loaded by the company_user layout right after the theme bundle, so it
 * applies everywhere (unlike ptui-page.css, which is an opt-in page skin).
 * Scope: things the audit of 16.09.2026 flagged as cross-cutting —
 *   G2  one typeface (Heebo) everywhere
 *   G3  tabular numerals + the .num helper
 *   G4  button palette: ONE brand action, everything else ghost/neutral
 *   G6  informational alerts are quiet, not danger-tinted
 *   G12 the empty-state component (PtuiHelper::emptyState)
 *   G13 one FAB for every list (bottom-left, 52px, brand)
 * Tokens verbatim from the skill's design-tokens.md.
 */

:root {
    --ptui-ink: #181425;
    --ptui-ink-soft: #5C5872;
    --ptui-ink-faint: #9694A8;
    --ptui-bg: #F1F2F8;
    --ptui-surface: #FFFFFF;
    --ptui-border: #E6E7F1;
    --ptui-border-soft: #EFF0F7;
    --ptui-brand: #E2265A;
    --ptui-brand-dark: #B71046;
    --ptui-brand-soft: #FCE6ED;
    --ptui-navy: #1E1A3B;
    --ptui-amber: #DD9A16;
    --ptui-amber-soft: #FCF1DA;
    --ptui-green: #1D9A63;
    --ptui-green-soft: #E2F6EC;
    --ptui-red: #DC3B3B;
    --ptui-red-soft: #FCE7E7;
    --ptui-slate: #736F87;
    --ptui-slate-soft: #EDEDF4;
    --ptui-radius-lg: 20px;
    --ptui-radius-md: 14px;
    --ptui-radius-sm: 9px;
    --ptui-shadow-card: 0 1px 2px rgba(24,20,37,.04), 0 10px 28px -16px rgba(24,20,37,.16);
    --ptui-shadow-pop: 0 12px 32px rgba(24,20,37,.16);
}

/* ---- G2: Heebo is the one typeface (was Assistant on body) ---- */
body,
.f_p,
.menu > .nav-item > .nav-link,
.redactor-editor,
.form-control,
.btn,
.dropdown-menu,
.modal,
.popover,
.tooltip {
    font-family: 'Heebo', 'Assistant', sans-serif !important;
}

/* ---- G3: numbers — Inter, tabular, LTR-isolated (design-tokens.md .num) ---- */
.num,
.ptui-num {
    font-family: 'Inter', 'Heebo', sans-serif;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}
/* every table cell already gets aligned digits, even before .num spans land */
table td,
table th,
.badge,
.ptui-fcount {
    font-variant-numeric: tabular-nums;
}

/* ---- G4: button palette ----
 * Bootstrap's blue .btn-primary, the green .btn-success and the old
 * pink→orange gradient (.btn-colorful) all collapse to the redesign's
 * two buttons: brand (primary action) and ghost (everything else).
 * Danger keeps its semantic red. */
#layout-wrapper .btn-primary,
#layout-wrapper .btn-success,
#layout-wrapper .btn-colorful,
#layout-wrapper .btn-info,
.modal .btn-primary,
.modal .btn-success,
.ptui-btn-brand {
    background: var(--ptui-brand) !important;
    background-image: none !important;
    border-color: var(--ptui-brand) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: var(--ptui-radius-sm);
    box-shadow: none;
    transition: background .15s ease, transform .15s ease;
}
#layout-wrapper .btn-primary:hover,
#layout-wrapper .btn-success:hover,
#layout-wrapper .btn-colorful:hover,
#layout-wrapper .btn-info:hover,
.modal .btn-primary:hover,
.modal .btn-success:hover,
.ptui-btn-brand:hover {
    background: var(--ptui-brand-dark) !important;
    border-color: var(--ptui-brand-dark) !important;
    color: #fff !important;
}
#layout-wrapper .btn-primary:focus,
#layout-wrapper .btn-success:focus,
#layout-wrapper .btn-colorful:focus,
.ptui-btn-brand:focus {
    box-shadow: 0 0 0 3px var(--ptui-brand-soft) !important;
}
#layout-wrapper .btn-secondary,
#layout-wrapper .btn-light,
#layout-wrapper .btn-outline-primary,
#layout-wrapper .btn-outline-secondary,
.modal .btn-secondary,
.ptui-btn-ghost {
    background: var(--ptui-surface) !important;
    background-image: none !important;
    border: 1px solid var(--ptui-border) !important;
    color: var(--ptui-ink-soft) !important;
    font-weight: 600;
    border-radius: var(--ptui-radius-sm);
    box-shadow: none;
}
#layout-wrapper .btn-secondary:hover,
#layout-wrapper .btn-light:hover,
#layout-wrapper .btn-outline-primary:hover,
#layout-wrapper .btn-outline-secondary:hover,
.modal .btn-secondary:hover,
.ptui-btn-ghost:hover {
    background: var(--ptui-slate-soft) !important;
    color: var(--ptui-ink) !important;
}
#layout-wrapper .btn-danger,
#layout-wrapper .btn-outline-danger {
    border-radius: var(--ptui-radius-sm);
    font-weight: 600;
}
/* the old outline gradient variant */
#layout-wrapper .btn-colorful-outline {
    border: 1px solid var(--ptui-brand);
    color: var(--ptui-brand-dark);
    border-radius: var(--ptui-radius-sm);
}
/* the "+" round add button (topbar / FAB) keeps its circle */
#layout-wrapper .rounded-circle.btn,
#layout-wrapper .btn.rounded-circle {
    border-radius: 50% !important;
}

/* ---- G6: informational alerts are quiet (slate), never danger-pink.
 * Validation errors keep .invalid-feedback / .alert-danger. ---- */
#layout-wrapper .alert-info,
#layout-wrapper .ptui-hint-box {
    background: var(--ptui-slate-soft);
    color: var(--ptui-ink-soft);
    border: 1px solid var(--ptui-border);
    border-radius: var(--ptui-radius-sm);
}
#layout-wrapper .alert-success {
    background: var(--ptui-green-soft);
    color: var(--ptui-green);
    border: 1px solid #CFEEDD;
    border-radius: var(--ptui-radius-sm);
}
#layout-wrapper .alert-warning {
    background: var(--ptui-amber-soft);
    color: #8A5F0B;
    border: 1px solid #F3E2B8;
    border-radius: var(--ptui-radius-sm);
}
#layout-wrapper .alert-danger {
    background: var(--ptui-red-soft);
    color: var(--ptui-red);
    border: 1px solid #F5C9C9;
    border-radius: var(--ptui-radius-sm);
}

/* ---- G12: empty state (components.md .empty-row > .empty-state) ---- */
.ptui-empty-row td {
    padding: 0 !important;
    border-bottom: none !important;
}
.ptui-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 52px;
    text-align: center;
    color: var(--ptui-ink);
}
.ptui-empty-state .ptui-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--ptui-brand-soft);
    color: var(--ptui-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 30px;
}
.ptui-empty-state .ptui-empty-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
}
.ptui-empty-state .ptui-empty-sub {
    color: var(--ptui-ink-soft);
    font-size: 14px;
    max-width: 340px;
    margin: 0 0 18px;
    line-height: 1.5;
}
.ptui-empty-state .ptui-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.ptui-empty-state .btn {
    border-radius: var(--ptui-radius-sm);
    font-weight: 700;
    padding: 8px 18px;
}
/* GridView's own wrapper for emptyText */
.grid-view .empty {
    padding: 0;
}

/* ---- G13: ONE floating action button — bottom-left, 52px, brand ---- */
.position-fixed.corner {
    right: auto !important;
    left: 20px !important;
    bottom: 20px !important;
    z-index: 1040;
}
.link-float,
.corner .link-float {
    width: 52px;
    height: 52px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--ptui-brand) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -8px rgba(226,38,90,.6) !important;
    border: 0;
}
.link-float:hover,
.corner .link-float:hover {
    background: var(--ptui-brand-dark) !important;
    transform: translateY(-1px);
}
.corner .link-float.whatsapp {
    background: #25d366 !important;
}
/* mobile: the FAB floats above the footer; keep it clear of the safe area */
@media (max-width: 767.98px) {
    .position-fixed.corner {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ---- focus ring (accessibility note in the skill) ---- */
#layout-wrapper a:focus-visible,
#layout-wrapper button:focus-visible,
#layout-wrapper .form-control:focus-visible {
    outline: 2px solid var(--ptui-brand);
    outline-offset: 2px;
}
/* the topbar search pill draws its own focus state (ptui-topbar.css) —
 * the brand outline on top of it read as a red error frame */
#page-topbar .form-control:focus-visible,
#page-topbar .ptui-search .form-control:focus {
    outline: none;
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    #layout-wrapper * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- tab strip for multi-page settings families (task settings) ---- */
.ptui-tabstrip {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--ptui-slate-soft);
    border-radius: 999px;
    padding: 4px;
    margin: 0 0 16px;
    width: fit-content;
    max-width: 100%;
}
.ptui-tabstrip .ptui-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ptui-ink-soft);
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ptui-tabstrip .ptui-tab:hover {
    color: var(--ptui-ink);
    text-decoration: none;
}
.ptui-tabstrip .ptui-tab.is-active {
    background: var(--ptui-surface);
    color: var(--ptui-brand-dark);
    box-shadow: var(--ptui-shadow-card);
}
.ptui-tabstrip .ptui-tab i {
    font-size: 16px;
}
@media (max-width: 640px) {
    .ptui-tabstrip {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ptui-tabstrip::-webkit-scrollbar { display: none; }
}

/* ---- phone mode switch: the floating two-line pill (operations screen
 * <-> full screens). Centered, above the safe area; the FAB keeps the
 * bottom-left corner. ---- */
.ptui-mode-pill {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 110px);
    padding: 8px 18px 8px 16px;
    border-radius: 999px;
    background: #181425;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 14px 30px -10px rgba(24, 20, 37, .6);
    font-family: 'Heebo', sans-serif;
}
.ptui-mode-pill:active { background: #2A2440; }
.ptui-mode-pill .mdi { font-size: 20px; line-height: 1; color: #FF8FAE; flex: 0 0 auto; }
.ptui-mode-pill-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: start; }
.ptui-mode-pill-text strong { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ptui-mode-pill-text small {
    font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .68);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the last rows of a page stay reachable above the pill */
body.ptui-has-mode-pill .page-content { padding-bottom: 96px; }

/* ---- bottom-sheet prompts (PWA install, "use the operations screen"):
 * layouts/_mobile_prompts.php ---- */
.ptui-prompt-backdrop {
    position: fixed; inset: 0; z-index: 1060; background: rgba(24, 20, 37, .5);
    opacity: 0; transition: opacity .2s ease;
}
.ptui-prompt-backdrop.is-open { opacity: 1; }
.ptui-prompt {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1061;
    max-width: 520px; margin: 0 auto; text-align: center;
    background: #fff; border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 40px -18px rgba(24, 20, 37, .35);
    padding: 22px 22px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    font-family: 'Heebo', sans-serif;
}
.ptui-prompt.is-open { transform: translateY(0); }
@media (min-width: 768px) {
    .ptui-prompt { bottom: 50%; transform: translateY(60%); border-radius: 20px; opacity: 0; transition: opacity .2s ease, transform .25s ease; }
    .ptui-prompt.is-open { transform: translateY(50%); opacity: 1; }
}
.ptui-prompt-icon { margin: 0 auto 10px; }
.ptui-prompt-icon.is-brand {
    width: 52px; height: 52px; border-radius: 50%; background: #FCE6ED; color: #E2265A;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.ptui-prompt-title { font-size: 17px; font-weight: 800; color: #181425; margin: 0 0 6px; line-height: 1.35; }
.ptui-prompt-body { font-size: 13.5px; color: #5C5872; margin: 0 0 16px; line-height: 1.5; }
.ptui-prompt-body.is-lead { font-size: 15px; color: #181425; font-weight: 600; }
.ptui-prompt-ios { background: #F1F2F8; border-radius: 9px; padding: 10px 12px; }
.ptui-prompt-ios .mdi { color: #E2265A; font-size: 18px; vertical-align: middle; }
.ptui-prompt-actions { display: flex; flex-direction: column; gap: 8px; }
.ptui-prompt-actions .btn { min-height: 46px; border-radius: 12px; font-weight: 700; }
.ptui-prompt-check { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: #5C5872; }
.ptui-prompt-check input { width: 18px; height: 18px; accent-color: #E2265A; margin: 0; }
.ptui-prompt [hidden] { display: none !important; }

/* ---- welcome card from the CEO (layouts/_company_register_popup.php) ---- */
#company_register_popup .modal-dialog { max-width: 380px; }
#company_register_popup .modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(24, 20, 37, .45); }
#company_register_popup .modal-header { display: none; }
#company_register_popup .modal-body { padding: 0; }
.ptui-welcome { padding: 30px 26px 24px; text-align: center; font-family: 'Heebo', sans-serif; }
.ptui-welcome-photo {
    display: block; margin: 0 auto 12px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px #E2265A, 0 12px 28px -10px rgba(24, 20, 37, .35);
}
.ptui-welcome-name { font-size: 12.5px; font-weight: 700; color: #9694A8; letter-spacing: .2px; margin-bottom: 10px; }
.ptui-welcome-title { font-size: 20px; font-weight: 800; color: #181425; margin: 0 0 10px; line-height: 1.3; }
.ptui-welcome-text {
    position: relative; font-size: 14.5px; line-height: 1.65; color: #5C5872; margin: 0 0 20px;
    background: #F1F2F8; border-radius: 14px; padding: 16px 18px;
}
.ptui-welcome-text::before {
    content: '\201D'; position: absolute; top: -14px; inset-inline-start: 14px;
    font-size: 44px; line-height: 1; color: #E2265A; font-family: Georgia, serif; opacity: .6;
}
.ptui-welcome-btn { width: 100%; min-height: 46px; border-radius: 12px; font-weight: 700; font-size: 15px; }
/* the "installed!" card: a home-screen style icon preview */
.ptui-home-icon { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 18px; }
.ptui-home-icon img { width: 64px; height: 64px; border-radius: 22%; box-shadow: 0 8px 20px -8px rgba(24, 20, 37, .45); }
.ptui-home-icon span { font-size: 12px; font-weight: 600; color: #181425; }