/* Workspace layer: screen-only. Document/PDF templates and their branding stay untouched. */
.skip-content { position: fixed; left: 16px; top: -100px; z-index: 10020; background: #fff; color: #143b33; padding: 12px 20px; }
.skip-content:focus { top: 12px; }
@media screen {
  .app-shell {
    --primary-color: #087f65;
    --primary-hover: #066650;
    --secondary-color: #285f96;
    --secondary-hover: #194a7c;
    --text-color: #263b48;
    --background-color: #f3f6f8;
    --border-color: #dde5e9;
    --workspace-ink: #102e30;
    font-size: 14px;
    line-height: 1.5;
  }
  .app-shell :focus-visible { outline: 3px solid #dfaa47; outline-offset: 3px; }
  .app-shell .header-bar {
    position: fixed; inset: 0 auto 0 0; width: 252px; height: 100dvh;
    box-sizing: border-box; padding: 28px 16px 18px; display: flex;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: #102e30; color: #ecf5f3; box-shadow: none; z-index: 300;
    border-right: 1px solid #254144;
  }
  .app-shell .logo-link { padding: 0 8px 26px; }
  .app-shell .header-bar .logo-placeholder { gap: 10px; }
  .app-shell .header-bar .logo-placeholder img { height: 35px; border-radius: 4px; }
  .app-shell .header-bar .logo-placeholder h2 { font-size: 19px; letter-spacing: -.5px; }
  .brand-caption { display: block; font-size: 10px; color: #acc2c0; margin-top: 3px; }
  .app-shell .primary-navigation {
    position: static; display: flex; flex: 1; min-height: 0; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 3px;
    background: transparent; padding: 0; box-shadow: none;
    scrollbar-width: thin; scrollbar-color: #496663 transparent;
  }
  .nav-section-label { font-size: 10px; letter-spacing: 1.7px; color: #9eb8b4; padding: 2px 12px 14px; }
  .module-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-shell input.module-search {
    flex: 0 0 auto; height: 38px;
    width: 100%; min-height: 38px; padding: 9px 12px; margin-bottom: 13px;
    font: inherit; font-size: 12px; background: #1c3c3e; border: 1px solid #42605f;
    border-radius: 7px; color: #fff; box-sizing: border-box;
  }
  .app-shell input.module-search::placeholder { color: #c0d0ce; }
  #module-search-empty { font-size: 12px; padding: 0 12px; }
  .app-shell .primary-navigation a, .app-shell .nav-dropdown-toggle {
    box-sizing: border-box; width: 100%; padding: 10px 12px; min-height: 42px;
    font-size: 13px; color: #c6d8d5; font-weight: 500; border: 0;
    text-align: left; border-radius: 7px; display: flex; align-items: center; gap: 11px;
    background: transparent; transition: background .15s, color .15s;
  }
  .nav-icon { width: 17px; text-align: center; font-size: 14px; opacity: .85; flex-shrink: 0; }
  .app-shell .primary-navigation a:hover, .app-shell .nav-dropdown-toggle:hover { background: #204649; color: #fff; }
  .app-shell .primary-navigation a[aria-current="page"] { background: #28554f; color: #fff; box-shadow: inset 3px 0 #68d4ac; font-weight: 600; }
  .app-shell .nav-dropdown { display: block; }
  .app-shell .nav-dropdown-toggle::after { content: '⌄'; margin-left: auto; color: #a6c3bc; }
  .app-shell .nav-dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .app-shell .nav-dropdown-content, .app-shell .nav-dropdown:hover .nav-dropdown-content {
    display: none; position: static; min-width: 0; box-shadow: none; border: 0;
    background: transparent; border-radius: 0; padding: 3px 0 6px 17px;
    margin: 0 0 0 17px; border-left: 1px solid #385452;
  }
  .app-shell .nav-dropdown.active .nav-dropdown-content { display: block; }
  .app-shell .nav-dropdown-content a { padding: 8px 10px; min-height: 34px; font-size: 12px; }
  .app-shell .header-bar .profile-area { position: relative; margin: 15px 0 0; padding: 14px 8px 0; border-top: 1px solid #35504f; justify-content: space-between; }
  .app-shell .profile-area::before { content: 'SUA CONTA'; color: #a6c3bc; font-size: 10px; letter-spacing: 1px; margin-right: auto; }
  .app-shell .notification-bell, .app-shell .profile-btn { color: #dcebe6; padding: 8px; background: #1c3c3e; border-radius: 8px; }
  .app-shell .dropdown-content { bottom: 48px; top: auto; left: 0; right: auto; border-radius: 10px; box-shadow: 0 10px 40px #102e3026; z-index: 400; }
  .app-shell #notification-dropdown-content { left: -110px; right: auto; width: min(320px, calc(100vw - 32px)); min-width: 240px; max-height: 60vh; overflow-y: auto; }
  .app-shell .workspace-topbar { margin-left: 252px; min-height: 66px; padding: 0 38px; background: #fff; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 15px; }
  .workspace-context { font-size: 11px; color: #627682; font-weight: 600; letter-spacing: .5px; }
  .workspace-context > span:first-child { color: #c2cdd2; margin: 0 13px; }
  .workspace-environment { color: #775a25; background: #fbf4e6; border: 1px solid #ead9b3; padding: 5px 9px; font-size: 9px; font-weight: 600; letter-spacing: .5px; border-radius: 5px; }
  .app-shell:has(> .header-bar) > main { margin-left: 252px; min-width: 0; }
  .app-shell:has(> .header-bar) > main > .container { width: 100%; max-width: 1600px; padding: 30px 38px 48px; margin: 0 auto; }
  .app-shell main h1 { font-size: 26px; color: #18323d; letter-spacing: -.8px; padding-bottom: 0; border: 0; margin: 0 0 24px; gap: 15px; flex-wrap: wrap; line-height: 1.3; }
  .app-shell main h1:empty { display: none; }
  .app-shell main h2 { color: #18323d; }
  .app-shell .page-header { border-bottom: 1px solid var(--border-color); }
  .app-shell main form { border-radius: 10px; padding: 24px; gap: 18px; }
  .app-shell main label { margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #3c535e; }
  .app-shell main input:not([type]), .app-shell main input:is([type="text"],[type="search"],[type="password"],[type="date"],[type="time"],[type="number"],[type="email"],[type="tel"]), .app-shell main select, .app-shell main textarea {
    box-sizing: border-box; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #cdd9df;
    border-radius: 7px; background: #fff; color: #263b48; font: inherit;
  }
  .app-shell input[type="checkbox"], .app-shell input[type="radio"] { accent-color: var(--primary-color); width: 17px; height: 17px; }
  .app-shell input[readonly] { background: #f0f4f6 !important; color: #647984; }
  .app-shell main input:focus, .app-shell main select:focus, .app-shell main textarea:focus { border-color: #087f65; box-shadow: 0 0 0 3px #087f651a; }
  .app-shell .btn, .app-shell input[type="submit"] { min-height: 40px; padding: 10px 16px; font-size: 12px; border-radius: 7px; box-sizing: border-box; }
  .app-shell .btn-sm { min-height: 32px; padding: 6px 10px; font-size: 11px; }
  .app-shell .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-info) { background: #edf2f4; color: #38515e; }
  .app-shell .search-bar form, .app-shell .search-bar-container form { flex-direction: row; align-items: center; gap: 10px; padding: 14px; }
  .app-shell .search-bar input[name="q"], .app-shell .search-bar-container input[name="q"] { flex: 1; min-width: 0; }
  .app-shell .search-bar input[type="submit"] { width: auto; }
  .app-shell table { border-radius: 9px; margin-top: 16px; font-size: 12px; }
  .app-shell th { font-size: 10px; letter-spacing: .7px; color: #657986; background: #f6f8fa; }
  .app-shell td, .app-shell th { padding: 14px 16px; }
  .app-shell tbody tr:hover { background: #f5faf8; }
  .app-shell td form { padding: 0; border: 0; background: none; }
  .workspace-table-scroll { overflow-x: auto; max-width: 100%; }
  .workspace-table-scroll table { min-width: 600px; }
  .app-shell .card, .app-shell .dashboard-card, .app-shell .stat-card { border-radius: 10px; box-shadow: 0 2px 3px #17313d03; }
  .app-shell .card:hover, .app-shell .dashboard-card:hover, .app-shell .stat-card:hover { transform: none; box-shadow: 0 4px 14px #17313d08; }
  .app-shell .flashes { background: #edf7f2; color: #215941; border-color: #bddfcf; font-size: 13px; }
  .app-shell .flash-error, .app-shell .flash-danger { color: #a72e2e; }
  .workspace-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; border: 1px solid #cfe1da; border-radius: 12px; background: #eaf3ee; margin-bottom: 28px; }
  .eyebrow { color: #527666; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
  .workspace-welcome h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.8px; margin: 8px 0 10px; }
  .workspace-welcome p { font-size: 13px; color: #526d63; margin: 0; max-width: 500px; }
  .welcome-mark { font-size: 46px; color: #7caa95; padding-right: 18px; }
  .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 14px; }
  .section-heading h2 { font-size: 15px; margin: 0; letter-spacing: -.2px; }
  .section-heading > span { color: #748591; font-size: 11px; }
  .shortcut-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 28px; }
  .workspace-shortcut { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: #fff; border: 1px solid var(--border-color); border-radius: 9px; color: #203b46; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
  .workspace-shortcut:hover { border-color: #78ac96; box-shadow: 0 3px 14px #143b330a; }
  .shortcut-icon { display: grid; place-items: center; width: 37px; height: 37px; background: #eef5f1; color: #21785d; border-radius: 9px; flex-shrink: 0; }
  .workspace-shortcut strong { display: block; font-size: 12px; }
  .workspace-shortcut small { display: block; color: #748591; font-size: 10px; margin-top: 3px; }
  .shortcut-arrow { margin-left: auto; color: #78918b; }
  .app-shell .filter-bar { padding: 14px 18px; border-radius: 9px; }
  .app-shell .filter-bar form { padding: 0; }
  .app-shell .filter-bar label { margin: 0; white-space: nowrap; }
  .app-shell .stat-card { padding: 20px 22px; }
  .app-shell .stat-card h4 { font-size: 11px; color: #637a85; font-weight: 500; }
  .app-shell .stat-card .stat-number { font-size: 31px; color: #183b37; letter-spacing: -1px; }
  .app-shell .stat-card-icon { opacity: 1; right: 22px; color: #50937d; background: #edf5f0; border-radius: 10px; padding: 10px; display: flex; }
  .app-shell .stat-card-icon svg { width: 23px; height: 23px; }
  .app-shell .dashboard-card h3 { font-size: 13px; border-bottom-width: 1px; }
  .app-shell .chart-wrapper { height: 270px; }
  .app-shell .chart-wrapper .no-data { padding: 60px 16px; font-size: 12px; color: #687e89; }
  .app-shell #warnings-container p { color: #637a85; font-size: 12px; }
  .app-shell form.server-form { padding: 0; background: transparent; border: 0; }
  .server-form fieldset { margin: 0; border: 1px solid var(--border-color); padding: 22px 24px 24px; border-radius: 10px; background: #fff; min-width: 0; }
  .server-form legend { padding: 0 8px; font-size: 13px; font-weight: 600; color: #275847; }
  .server-form .field-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 22px; }
  .server-form .field { display: flex; flex-direction: column; }
  .server-form .field-wide { grid-column: span 2; }
  .form-intro { color: #6b808a; font-size: 12px; margin: -12px 0 22px; }
  .workspace-notice { padding: 14px 18px; background: #edf5f1; border: 1px solid #c9dfd4; border-left: 3px solid #458f70; border-radius: 8px; color: #345d4d; font-size: 12px; margin: 0 0 20px; }
  .employee-summary { display: flex; justify-content: space-between; gap: 24px; padding: 25px; border: 1px solid var(--border-color); border-radius: 12px; background: #fff; align-items: center; }
  .employee-summary h2 { font-size: 24px; margin: 8px 0; letter-spacing: -.6px; }
  .employee-summary p, .employee-help { font-size: 12px; color: #667d87; margin: 6px 0 16px; }
  .employee-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .employee-sections { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
  .employee-sections a { color: #3e675a; font-size: 12px; padding: 8px 12px; text-decoration: none; border-radius: 6px; }
  .employee-sections a:hover, .employee-sections a:focus { background: #e6f0eb; }
  .employee-workspace { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); grid-template-areas: 'data timeline' 'discounts discounts'; gap: 20px; align-items: start; }
  .employee-workspace > section { border: 1px solid var(--border-color); border-radius: 10px; background: #fff; padding: 22px; min-width: 0; scroll-margin-top: 25px; }
  .employee-workspace h3 { font-size: 15px; margin: 0 0 10px; }
  .employee-data { grid-area: data; }
  .employee-timeline { grid-area: timeline; }
  .employee-discounts { grid-area: discounts; overflow-x: auto; }
  .app-shell .employee-data-form { border: 0; padding: 0; gap: 10px; }
  .employee-workspace .timeline { list-style: none; padding: 0; margin: 22px 0 0; }
  .employee-workspace .timeline li { border-left: 2px solid #ccdfd5; margin: 0 0 16px 5px; padding: 0 0 8px 18px; }
  .employee-workspace .timeline-badge { display: inline-block; padding: 4px 8px; background: #edf5f1; color: #39785e; font-size: 10px; border-radius: 5px; }
  .employee-workspace .timeline-title { font-size: 13px; margin: 10px 0 6px; }
  .employee-workspace .timeline p { font-size: 12px; color: #647c86; }
  .employee-workspace #form-add-desconto { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 14px; align-items: end; padding: 16px; background: #f7faf9; }
  @media (max-width: 1100px) { .employee-summary { align-items: flex-start; flex-direction: column; } .employee-actions { justify-content: flex-start; } .employee-workspace { grid-template-columns: 1fr; grid-template-areas: 'timeline' 'data' 'discounts'; } .employee-workspace #form-add-desconto { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .employee-workspace #form-add-desconto { grid-template-columns: 1fr; } .employee-summary h2 { font-size: 21px; } }
  .required-label { font-size: 11px; font-weight: 400; color: #758791; }
  .server-form .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 0; }
  .portaria-workbench { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
  .app-shell details.new-portaria-menu { flex: 1; padding: 0; min-width: 0; }
  .new-portaria-menu summary, .batch-details summary { padding: 17px 20px; cursor: pointer; font-size: 13px; font-weight: 600; color: #216a53; }
  .new-portaria-menu .portaria-catalogue { padding: 0 20px 20px; }
  .new-portaria-menu .button-grid { grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: 8px; margin-top: 14px; }
  .app-shell .new-portaria-menu .btn-menu { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px; border-width: 1px; font-size: 11px; min-height: 58px; text-align: left; }
  .app-shell .new-portaria-menu .btn-menu svg { width: 22px; height: 22px; margin: 0; flex-shrink: 0; }
  .batch-details { flex: 1; background: #fff; border: 1px solid var(--border-color); border-radius: 9px; min-width: 0; }
  .batch-details .batch-export-container { padding: 0 20px 20px; }
  .batch-details form { padding: 16px !important; }
  .batch-details .form-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
  .catalogue-empty { color: #667d87; font-size: 12px; }
  [hidden] { display: none !important; }
  @media (max-width: 1200px) {
    .app-shell .header-bar { width: 222px; }
    .app-shell .workspace-topbar, .app-shell:has(> .header-bar) > main { margin-left: 222px; }
    .app-shell:has(> .header-bar) > main > .container { padding: 25px; }
    .shortcut-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .app-shell .filter-bar form, .app-shell .filter-inputs { flex-wrap: wrap; gap: 12px; }
  }
  @media (max-width: 992px) {
    .app-shell .header-bar { width: 100%; height: 64px; padding: 12px 18px; flex-direction: row; align-items: center; }
    .app-shell .logo-link { padding: 0; }
    .brand-caption { display: none; }
    .app-shell .primary-navigation { display: none; position: fixed; inset: 64px 0 0; background: #102e30; padding: 20px; }
    .app-shell .primary-navigation.nav-open { display: flex; }
    .app-shell .mobile-nav-toggle { display: block; position: static; transform: none; margin-left: auto; width: 30px; height: 28px; }
    .app-shell .mobile-nav-toggle::before, .app-shell .mobile-nav-toggle::after { width: 25px; left: auto; right: 20px; }
    .app-shell .mobile-nav-toggle::before { top: 23px; }
    .app-shell .mobile-nav-toggle::after { top: 39px; bottom: auto; }
    .app-shell .header-bar .profile-area { border: 0; padding: 0; margin: 0 55px 0 auto; gap: 8px; }
    .app-shell .profile-area::before { display: none; }
    .app-shell .dropdown-content { bottom: auto; top: 48px; left: auto; right: 0; }
    .app-shell #notification-dropdown-content { left: auto; right: -40px; }
    .app-shell .workspace-topbar { margin: 64px 0 0; min-height: 52px; padding: 10px 20px; flex-wrap: wrap; }
    .app-shell:has(> .header-bar) > main { margin-left: 0; }
    .server-form .field-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .portaria-workbench { flex-direction: column; }
    .portaria-workbench > details { width: 100%; box-sizing: border-box; }
  }
  @media (max-width: 600px) {
    .app-shell:has(> .header-bar) > main > .container { padding: 22px 16px; }
    .app-shell main h1 { font-size: 23px; }
    .workspace-welcome { padding: 23px; }
    .workspace-welcome h2 { font-size: 24px; }
    .welcome-mark { display: none; }
    .shortcut-grid { grid-template-columns: 1fr; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
    .server-form .field-grid { grid-template-columns: 1fr; }
    .server-form .field-wide { grid-column: auto; }
    .server-form fieldset { padding: 18px; }
    .app-shell .filter-bar form, .app-shell .filter-inputs, .app-shell .filter-bar .form-group { flex-direction: column; align-items: stretch; width: 100%; }
    .app-shell .search-bar form { flex-wrap: wrap; }
  }
  @media (prefers-reduced-motion: reduce) { .app-shell * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
}
