/* =============================================================
   intHR Design System
   Single source of truth for all design tokens and base styles.
   Version: 3.3 | 2026-05-11
   ============================================================= */

/* -------------------------------------------------------------
   LAYER 0: Self-hosted Fonts
   ------------------------------------------------------------- */

@font-face {
    font-family: 'Montserrat';
    src: url('/static/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/static/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/static/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------
   LAYER 1: CSS Custom Properties (Design Tokens)
   ------------------------------------------------------------- */
:root {

    /* ── Primary ─────────────────────────────────────────────── */
    --color-primary:                  #1148A0;
    --color-primary-action:           #1450A0;
    --color-primary-active:           #103E8A;

    /* ── Navbar ──────────────────────────────────────────────── */
    --color-nav-bg:           var(--color-primary-action);
    --color-nav-text:         rgba(255, 255, 255, 0.80);
    --color-nav-text-active:  #ffffff;
    --color-nav-item-hover:   rgba(255, 255, 255, 0.12);
    --color-nav-item-active:  rgba(255, 255, 255, 0.18);
    --color-nav-border:       rgba(255, 255, 255, 0.15);
    --color-nav-separator:    rgba(255, 255, 255, 0.22);
    --color-on-primary:               #FFFFFF;
    --color-primary-container:        #0070F3;
    --color-on-primary-container:     #FFFFFF;
    --color-inverse-primary:          #AEC6FF;

    /* ── Surface ─────────────────────────────────────────────── */
    --color-bg:                       #DDE3EA;
    --color-surface:                  #FFFFFF;
    --color-surface-low:              #EEF1F5;
    --color-surface-container:        #E4E9EF;
    --color-surface-high:             #D8DFE8;
    --color-surface-glass:            rgba(255, 255, 255, 0.85);
    --color-surface-glass-border:     rgba(10, 25, 47, 0.08);
    --color-surface-active:           var(--color-surface-container);

    /* ── Text / On-surface ───────────────────────────────────── */
    --color-on-surface:               #091B39;
    --color-on-surface-muted:         #414754;
    --color-on-surface-faint:         #727786;

    /* ── Border / Outline ────────────────────────────────────── */
    --color-outline:                  #727786;
    --color-outline-variant:          #C1C6D7;

    /* ── Secondary ───────────────────────────────────────────── */
    --color-secondary:                #515F78;
    --color-secondary-container:      #D2E0FE;
    --color-on-secondary-container:   #55637D;

    /* ── Semantic — Error ────────────────────────────────────── */
    --color-error:                    #BA1A1A;
    --color-error-container:          #FFDAD6;
    --color-on-error:                 #FFFFFF;
    --color-on-error-container:       #93000A;

    /* ── Semantic — Success ──────────────────────────────────── */
    --color-success:                  #1A6B3A;
    --color-success-container:        #D4F0DE;
    --color-on-success-container:     #1A6B3A;

    /* ── Semantic — Warning ──────────────────────────────────── */
    --color-warning:                  #7A4F00;
    --color-warning-container:        #FFEFC8;
    --color-on-warning-container:     #7A4F00;

    /* ── Semantic — Star ─────────────────────────────────────── */
    --color-star:                     #FFD700;

    /* ── Inverse ─────────────────────────────────────────────── */
    --color-inverse-surface:          #20304F;
    --color-inverse-on-surface:       #EDF0FF;

    /* ── Typography — Font Families ──────────────────────────── */
    --font-display:  'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body:     'Open Sans', system-ui, -apple-system, sans-serif;
    --font-label:    'Inter', system-ui, -apple-system, sans-serif;

    /* ── Typography — Scale ──────────────────────────────────── */
    --text-display-lg:   700 48px/1.1  var(--font-display);
    --text-headline-lg:  600 32px/1.2  var(--font-display);
    --text-headline-md:  600 24px/1.3  var(--font-display);
    --text-headline-sm:  600 20px/1.35 var(--font-display);
    --text-body-lg:      400 18px/1.6  var(--font-body);
    --text-body-md:      400 16px/1.5  var(--font-body);
    --text-body-sm:      400 14px/1.5  var(--font-body);
    --text-label-md:     500 14px/1.2  var(--font-label);
    --text-label-sm:     600 12px/1.2  var(--font-label);

    /* ── Spacing (8px rhythmic scale) ────────────────────────── */
    --space-xs:       4px;
    --space-sm:       12px;
    --space-base:     8px;
    --space-md:       24px;
    --space-lg:       48px;
    --space-xl:       80px;
    --space-gutter:   24px;
    --space-margin:   32px;
    --space-page-max: 1280px;

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

    /* ── Elevation & Shadow ──────────────────────────────────── */
    --shadow-none:        none;
    --shadow-sm:          0 1px 3px rgba(10, 25, 47, 0.06);
    --shadow-card:        0 4px 16px rgba(10, 25, 47, 0.08);
    --shadow-card-hover:  0 8px 32px rgba(10, 25, 47, 0.12);
    --shadow-glass:       0 8px 32px rgba(10, 25, 47, 0.10);
    --shadow-modal:       0 24px 60px rgba(10, 25, 47, 0.18);
    --shadow-dropdown:    0 16px 40px rgba(10, 25, 47, 0.14);
    --shadow-tooltip:     0 8px 24px rgba(10, 25, 47, 0.16);

    /* ── Z-Index Scale ───────────────────────────────────────── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    150;
    --z-overlay:   200;
    --z-modal:     300;
    --z-toast:     400;
    --z-tooltip:   500;

    /* ── Animation — Duration ────────────────────────────────── */
    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   300ms;
    --duration-xslow:  500ms;

    /* ── Animation — Easing ──────────────────────────────────── */
    --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

    /* ── Breakpoints (reference only — use in @media queries) ── */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* -------------------------------------------------------------
   LAYER 2: Base Reset & Global Styles
   ------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-on-surface);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-on-surface);
}

a {
    color: var(--color-primary-action);
    text-decoration: none;
}

.page-content {
    flex: 1;
    animation: page-enter var(--duration-slow) var(--ease-decelerate);
}

/* -------------------------------------------------------------
   LAYER 3: Keyframe Animations
   ------------------------------------------------------------- */

/* Spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton shimmer */
@keyframes skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Input error shake */
@keyframes field-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-4px); }
    40%       { transform: translateX(4px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX(3px); }
}

/* Page enter */
@keyframes page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Toast slide in */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Toast slide out */
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(calc(100% + 24px)); }
}

/* -------------------------------------------------------------
   LAYER 4: Accessibility — Reduced Motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------
   LAYER 5: Print Styles
   ------------------------------------------------------------- */
@media print {
    .top-navbar,
    .base-footer,
    .btn-back,
    .header-actions,
    .controls-panel,
    .send-bar,
    #navProfileDropdown,
    #navNotificationsDropdown,
    #navCalendarDropdown  { display: none !important; }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    .page-wrapper { padding: 0 !important; }

    .truncate,
    .truncate-tooltip  { white-space: normal !important; overflow: visible !important; }

    .clamp-2,
    .clamp-3           { -webkit-line-clamp: unset !important; overflow: visible !important; }

    a[href]::after     { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
    a[href^="mailto"]::after,
    a[href^="tel"]::after,
    a[href^="/"]::after { content: ""; }
}

/* -------------------------------------------------------------
   LAYER 6: Utility — Overflow / Truncation
   ------------------------------------------------------------- */

/* T1: Single-line ellipsis — with title tooltip */
.truncate-tooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* T2: Single-line ellipsis — no tooltip */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* T3: Multi-line clamp */
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* T4: Free wrap (chips, tags) */
.wrap-free {
    white-space: normal;
    word-break: break-word;
}

/* Email addresses — break-all, never ellipsis */
.email-address {
    word-break: break-all;
}

/* -------------------------------------------------------------
   LAYER 7: Skeleton Loader
   ------------------------------------------------------------- */
.skeleton {
    background: var(--color-surface-container);
    border-radius: var(--radius-base);
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-surface-high) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer var(--duration-xslow) linear infinite;
}

/* -------------------------------------------------------------
   LAYER 8: Scroll-to-top button
   ------------------------------------------------------------- */
.scroll-to-top {
    position: fixed;
    bottom: 88px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-on-surface-muted);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
    z-index: var(--z-raised);
}

.scroll-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-top:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary-action);
}

/* -------------------------------------------------------------
   LAYER 9: Toast animations (used by toast.js)
   ------------------------------------------------------------- */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(calc(100% + 24px)); }
}

/* =============================================================
   DARK MODE — İleri Faz için hazır
   Aktivasyon: @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... } }
   ve [data-theme="dark"] { ... } ile açılır.
   Token haritası DESIGNPLAN.md §6.1.1'de belgelenmiştir.
   ============================================================= */