@charset "UTF-8";

/* Layer order */
@layer tokens, layout, components, pages, utilities;

/* Design tokens */
@import url("base/typography.tokens.css") layer(tokens);
@import url("base/variables.base.css") layer(tokens);

/* Layout */
@import url("layout/app-shell.css") layer(layout);
@import url("layout/app-topbar.css") layer(layout);
@import url("layout/app-sidebar.css") layer(layout);
@import url("layout/app-aside-icon-bar.css") layer(layout);
@import url("layout/app-page-layout.css") layer(layout);

/* Components */
@import url("components/app-list-titlebar.css") layer(components);
@import url("components/app-list-toolbar.css") layer(components);
@import url("components/app-list-table.css") layer(components);
@import url("components/app-breadcrumb.css") layer(components);
@import url("components/app-badges.css") layer(components);
@import url("components/app-buttons.css") layer(components);

/* App-level base */
@layer tokens {
  :root { color-scheme: light; }
}

@layer layout {
  html, body {
    margin: 0;
    padding: 0;
    background: var(--app-background-color);
    font-family: var(--app-font-family);
    color: var(--app-color);
    font-size: var(--text-base);
  }

  .app-header { background: #fff; }
  .brand-wordmark {
    display: inline-flex; align-items: center;
    font-size: 1.125rem; color: #111; text-decoration: none;
  }
  .brand-wordmark b { font-weight: 700; }
  .brand-wordmark span { font-weight: 400; color: #111; }
  .brand-divider {
    width: 1px; height: 1.15rem;
    background: var(--app-border); margin-inline: .65rem;
  }

  aside.app-sidebar { border-right: 1px solid var(--app-border); }
  .app-sidebar-panel-title {
    font-weight: 600; color: var(--app-color);
    padding: 0 var(--app-spacing); font-size: var(--text-sm);
    margin-bottom: .25rem; margin-top: .5rem; display: block;
  }

  aside.aside-icon-bar li a,
  aside.aside-icon-bar li button { padding: .75rem .5rem; }
  aside.aside-icon-bar li a.active { background: #f3f6fa; }

  .app-sidebar-admin-group summary {
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: .5rem var(--app-spacing) !important;
    line-height: 1; list-style: none;
  }
  .app-sidebar-admin-group summary::-webkit-details-marker { display: none; }
  .app-sidebar-admin-group summary > span {
    top: 0 !important; display: inline-flex !important; align-items: center;
  }
  .app-sidebar-admin-group summary > i.bi:not(.chev) {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 5px;
    background: color-mix(in srgb, var(--app-nav-icon-color, var(--app-primary)) 14%, transparent);
    color: var(--app-nav-icon-color, var(--app-primary));
    font-size: 11px; flex-shrink: 0;
  }
  .app-sidebar-admin-group summary > i.chev {
    display: inline-flex !important; margin-left: auto !important;
    color: var(--app-muted-color) !important;
    background: transparent !important;
    width: auto !important; height: auto !important;
    font-size: 10px !important;
    transition: transform .15s;
  }
  .app-sidebar-admin-group details[open] summary > i.chev { transform: rotate(180deg); }

  /* Suppress the global ::after chevron — the <i class="chev"> handles rotation */
  .app-sidebar-admin-group summary::after { display: none !important; content: none !important; }

  .app-main-content { padding-block-start: 1.5rem !important; }

  .app-topbar-search-trigger { background: #fff; }
  .app-topbar-search-trigger .bi-search { color: var(--app-muted-color); }

  .tenant-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 4px;
    border: 1px solid var(--app-border); background: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #111;
  }
}

@layer components {
  /* Table */
  .data-table-wrap { overflow-x: auto; }
  table.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  table.data-table thead th {
    text-align: left; font-size: var(--text-xs); font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    color: var(--app-muted-color); padding: .6rem .75rem;
    border-bottom: 1px solid var(--app-border); white-space: nowrap; background: transparent;
  }
  table.data-table thead th.sortable::after {
    content: ""; display: inline-block; margin-left: .35rem; width: 10px; height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23888' stroke-width='1.25'><path d='M2.5 4 5 1.5 7.5 4'/><path d='M2.5 6 5 8.5 7.5 6'/></svg>");
    background-repeat: no-repeat; background-size: 10px 10px; vertical-align: -1px;
  }
  table.data-table tbody td {
    padding: .85rem .75rem; border-bottom: 1px solid var(--app-muted-border-color);
    color: var(--app-color); vertical-align: middle;
  }
  table.data-table tbody tr:hover td { background: #f8fafc; }

  .org-avatar {
    width: 28px; height: 28px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #111; background: #f0f4f8;
    border: 1px solid var(--app-muted-border-color); overflow: hidden; flex-shrink: 0;
  }
  .avatar-cell { display: flex; align-items: center; gap: .65rem; }

  /* Toolbar */
  .toolbar-field { display: flex; flex-direction: column; gap: 4px; }
  .toolbar-field > label { font-size: var(--text-xs); color: var(--app-muted-color); }
  .toolbar-field input[type="search"],
  .toolbar-field input[type="text"] {
    height: 40px !important; border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius); padding: 0 .7rem !important;
    font-size: var(--text-sm) !important; color: var(--app-color);
    background: var(--app-form-element-background-color); min-width: 220px;
    width: auto !important; box-sizing: border-box;
  }
  .toolbar-field input:focus { outline: none; border-color: var(--app-primary); }
  .btn-filter {
    height: 40px !important; padding: 0 .85rem; border: 1px solid var(--app-border);
    background: #fff; color: #373c44; font-size: var(--text-sm);
    border-radius: var(--app-border-radius); display: inline-flex; align-items: center;
    gap: .4rem; cursor: pointer;
    --app-background-color: #fff; --app-border-color: var(--app-border); --app-color: #373c44;
  }
  .btn-filter:hover { border-color: var(--app-primary); }
  .page-size-wrap { margin-left: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
  .page-size-wrap label { font-size: var(--text-xs); color: var(--app-muted-color); }
  .page-size-wrap select {
    height: 40px !important; padding: 0 2rem 0 .6rem; border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius); font-size: var(--text-sm); color: var(--app-color);
    background: #fff; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.5'><path d='M3 5l3 3 3-3'/></svg>");
    background-repeat: no-repeat; background-position: right .5rem center; background-size: 12px;
    min-width: 90px;
  }

  /* Buttons */
  .btn-create {
    background: #1fa463; border: 1px solid #1fa463; color: #fff;
    padding: .5rem .9rem; border-radius: var(--app-border-radius);
    font-size: var(--text-sm); font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: background var(--app-transition); text-decoration: none;
  }
  .btn-create:hover { background: #198c52; border-color: #198c52; color: #fff; }

  .btn-back {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius); background: #fff;
    color: #373c44; font-size: var(--text-sm); cursor: pointer;
    text-decoration: none;
    --app-background-color: #fff; --app-border-color: var(--app-border); --app-color: #373c44;
  }
  .btn-back:hover { border-color: var(--app-primary); color: #373c44; }

  /* Pagination */
  .pagination-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1.5rem; font-size: var(--text-sm); color: var(--app-muted-color);
  }
  .pagination-controls { display: flex; gap: .4rem; align-items: center; }
  .page-btn {
    width: 28px; height: 28px; border: 1px solid var(--app-border);
    background: #fff; border-radius: 6px; display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--app-muted-color); cursor: pointer; font-size: 12px;
  }
  .page-btn:hover:not(:disabled) { border-color: var(--app-primary); color: var(--app-primary); }
  .page-btn:disabled { opacity: .4; cursor: not-allowed; }
  .page-btn.active { background: #eafaf2; border-color: #8fe0b0; color: #1f6a3a; }

  /* Flash */
  .flash {
    padding: .75rem 1rem; border-radius: var(--app-border-radius);
    margin-bottom: 1rem; font-size: var(--text-sm);
  }
  .flash--success { background: #e6f6eb; color: #1f6a3a; border: 1px solid #8fe0b0; }
  .flash--error   { background: #fdecea; color: #b91c1c; border: 1px solid #fca5a5; }
  .flash--info    { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

  /* Footer */
  .site-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 2.5rem; padding: 1rem 0 0 0;
    font-size: var(--text-xs); color: var(--app-muted-color);
  }
  .site-footer > div { padding-left: 0; margin-left: 0; }
  .site-footer a { color: var(--app-muted-color); text-decoration: none; margin-right: 1rem; }
  .site-footer a:hover { color: var(--app-color); }

  /* Table thumbnail */
  .table-thumb {
    width: 40px; height: 40px; object-fit: contain;
    border: 1px solid var(--app-border); border-radius: 4px; padding: 2px;
  }
  .table-empty {
    padding: 2rem; text-align: center; color: var(--app-muted-color);
    font-size: var(--text-sm);
  }

  /* Action buttons in table rows */
  .btn-action {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem; border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius); background: #fff;
    color: #373c44; font-size: var(--text-xs); cursor: pointer;
    text-decoration: none; white-space: nowrap;
    --app-background-color: #fff; --app-border-color: var(--app-border); --app-color: #373c44;
  }
  .btn-action:hover { border-color: var(--app-primary); color: #373c44; }
  .btn-action--danger { border-color: #fca5a5; color: #b91c1c; }
  .btn-action--danger:hover { background: #fdecea; border-color: #f87171; color: #b91c1c; }

  /* Logout */
  .btn-logout {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem; border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius); background: #fff;
    color: #373c44 !important; font-size: var(--text-xs); cursor: pointer;
    --app-background-color: #fff;
    --app-border-color: var(--app-border);
    --app-color: #373c44;
  }
  .btn-logout:hover { border-color: #f87171; color: #b91c1c !important; }
}

@layer pages {
  /* Form layouts */
  .form-page { max-width: 680px; }
  .form-section {
    background: #fff; border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius); padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
  }
  .form-section__title {
    font-size: var(--text-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    color: var(--app-muted-color); margin: 0 0 1rem 0;
  }
  .form-field { margin-bottom: .85rem; }
  .form-field:last-child { margin-bottom: 0; }
  .form-label {
    display: block; font-size: var(--text-sm); font-weight: 500;
    color: var(--app-color); margin-bottom: .35rem;
  }
  .form-label--optional::after {
    content: " (optional)"; font-weight: 400; color: var(--app-muted-color);
  }
  .form-control {
    width: 100%; box-sizing: border-box;
    height: 40px; padding: 0 .7rem;
    border: 1px solid var(--app-border); border-radius: var(--app-border-radius);
    font-size: var(--text-sm); color: var(--app-color);
    background: var(--app-form-element-background-color);
    font-family: var(--app-font-family);
    transition: border-color var(--app-transition);
  }
  .form-control:focus { outline: none; border-color: var(--app-primary); }
  .form-control--error { border-color: #f87171; }
  textarea.form-control { height: auto; padding: .6rem .7rem; resize: vertical; }
  .form-hint { font-size: var(--text-xs); color: var(--app-muted-color); margin: .3rem 0 0; }
  .field-error { font-size: var(--text-xs); color: #b91c1c; margin-top: .25rem; display: block; }
  .form-file__preview {
    display: block; max-width: 120px; max-height: 60px;
    object-fit: contain; margin-bottom: .5rem;
    border: 1px solid var(--app-border); border-radius: 4px; padding: 4px;
  }
  .form-actions {
    display: flex; gap: .75rem; margin-top: 1.25rem; align-items: center;
  }
  .btn-submit {
    background: #1fa463; border: 1px solid #1fa463; color: #fff;
    padding: .5rem 1.1rem; border-radius: var(--app-border-radius);
    font-size: var(--text-sm); font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: background var(--app-transition);
  }
  .btn-submit:hover { background: #198c52; border-color: #198c52; }
  .btn-cancel {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius); background: #fff;
    color: var(--app-color); font-size: var(--text-sm); cursor: pointer;
    text-decoration: none;
  }
  .btn-cancel:hover { border-color: var(--app-primary); }

  /* ── Detail / Edit page ── */

  /* Two-column grid: form | aside */
  .details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 2.25rem;
    align-items: start;
  }
  @media (max-width: 968px) {
    .details-grid { grid-template-columns: 1fr; }
  }

  /* Title row: back arrow + h1 + action buttons */
  .details-titlebar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
  }
  .details-titlebar h1 {
    margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--app-color);
    display: inline-flex; align-items: center; gap: .65rem;
  }
  .details-titlebar-left {
    display: inline-flex; align-items: center; gap: .65rem;
  }
  .back-btn {
    background: transparent; border: 0; padding: 0;
    width: 28px; height: 28px; display: inline-flex;
    align-items: center; justify-content: center;
    color: #373c44; cursor: pointer; border-radius: 6px;
    flex-shrink: 0; text-decoration: none;
    --app-background-color: transparent; --app-border-color: transparent; --app-color: #373c44;
  }
  .back-btn:hover { background: #f3f4f6; color: #373c44; }
  .back-btn i { font-size: 18px; }

  .details-actions { display: flex; gap: .6rem; align-items: center; }
  .btn-secondary {
    background: #fff; border: 1px solid var(--app-border); color: #111;
    padding: .5rem .9rem; border-radius: var(--app-border-radius);
    font-size: var(--text-sm); font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    text-decoration: none; transition: border-color var(--app-transition);
    --app-background-color: #fff; --app-border-color: var(--app-border); --app-color: #111;
  }
  .btn-secondary:hover { border-color: #cbd1d9; color: #111; }

  /* Tabs */
  .detail-tabs {
    display: flex; gap: 0; margin: 0 0 1.5rem 0;
    border-bottom: 1px solid var(--app-border);
    overflow-x: auto; overflow-y: hidden;
  }
  .detail-tabs button {
    background: transparent; border: 0; border-radius: 0; padding: .6rem .9rem;
    font-size: var(--text-sm); color: var(--app-muted-color);
    border-bottom: 2px solid transparent; cursor: pointer;
    white-space: nowrap; font-weight: 500; margin-bottom: -1px;
    flex: 0 0 auto;
    --app-background-color: transparent; --app-border-color: transparent; --app-color: var(--app-muted-color);
  }
  .detail-tabs button:hover { color: #373c44; }
  .detail-tabs button.is-active { color: #111; border-color: var(--app-primary); font-weight: 600; }

  /* Form */
  .detail-form { max-width: 640px; }
  .form-row { display: grid; gap: 1rem; margin-bottom: 1.1rem; }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row .form-field { display: flex; flex-direction: column; gap: .4rem; }
  .form-row .form-field label {
    font-size: var(--text-sm); color: var(--app-color); font-weight: 400;
  }
  .form-row .form-field label .req { color: var(--app-color); }
  .form-row .form-field input[type="text"],
  .form-row .form-field input[type="email"],
  .form-row .form-field input[type="url"],
  .form-row .form-field input[type="tel"],
  .form-row .form-field input[type="datetime-local"],
  .form-row .form-field input[type="file"],
  .form-row .form-field textarea {
    border: 1px solid var(--app-border); border-radius: var(--app-border-radius);
    padding: 0 .75rem; font-size: var(--text-sm); background: #fff;
    color: var(--app-color); font-family: inherit;
    width: 100%; box-sizing: border-box;
  }
  .form-row .form-field input:not([type="file"]):not([type="checkbox"]) {
    height: 36px;
  }
  .form-row .form-field textarea {
    height: auto; padding: .5rem .75rem; resize: vertical; min-height: 72px;
  }
  .form-row .form-field input[type="file"] {
    height: auto; padding: .4rem .5rem; background: var(--app-form-element-background-color);
  }
  .form-row .form-field input:focus,
  .form-row .form-field textarea:focus {
    outline: none; border-color: var(--app-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 18%, transparent);
  }
  .form-row .form-field .field-error {
    font-size: var(--text-xs); color: #b91c1c; margin-top: .15rem;
  }
  .form-row .form-field .form-hint {
    font-size: var(--text-xs); color: var(--app-muted-color); margin-top: .15rem;
  }
  .form-row .form-field .form-file__preview {
    display: block; max-width: 100px; max-height: 50px;
    object-fit: contain; margin-bottom: .4rem;
    border: 1px solid var(--app-border); border-radius: 4px; padding: 3px;
  }

  /* Collapsible form sections */
  .detail-section {
    margin-top: .25rem; border-bottom: 1px solid var(--app-border);
  }
  .detail-section > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: .95rem 0; font-size: var(--text-sm); color: var(--app-color); font-weight: 500;
  }
  .detail-section > summary::-webkit-details-marker { display: none; }
  .detail-section > summary::after { display: none !important; content: none !important; }
  .detail-section > summary > i.chev {
    color: var(--app-muted-color); font-size: 12px; transition: transform .15s;
  }
  .detail-section[open] > summary > i.chev { transform: rotate(90deg); }
  .detail-section-body { padding: 0 0 1rem; }

  /* Sticky right aside */
  .details-aside {
    position: sticky;
    top: calc(var(--app-topbar-height, 3rem) + 1rem);
  }
  .aside-brand {
    font-size: 1.5rem; line-height: 1.1; margin-bottom: 1rem; color: #111;
  }
  .aside-brand b { font-weight: 700; }
  .aside-title {
    font-size: .95rem; font-weight: 600; color: var(--app-color);
    margin: 0 0 .15rem 0; line-height: 1.25;
  }
  .aside-subtitle {
    font-size: var(--text-sm); color: var(--app-muted-color); margin-bottom: 1.1rem;
  }
  .aside-nav {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--app-border);
  }
  .aside-nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 0; font-size: var(--text-sm); color: var(--app-color);
    text-decoration: none; border-bottom: 1px solid var(--app-border);
  }
  .aside-nav a:hover { color: var(--app-primary); }
  .aside-nav a i { color: var(--app-muted-color); font-size: 11px; }
}

/* ── Tagify overrides ── */
@layer components {
  .tagify {
    --tags-border-color:       var(--app-border);
    --tags-hover-border-color: var(--app-muted-color);
    --tags-focus-border-color: var(--app-primary);
    --tag-bg:                  color-mix(in srgb, var(--app-primary) 12%, transparent);
    --tag-hover:               color-mix(in srgb, var(--app-primary) 20%, transparent);
    --tag-text-color:          var(--app-color);
    --tag-remove-btn-color:    var(--app-muted-color);
    --tag-remove-btn-bg--hover: color-mix(in srgb, var(--app-primary) 30%, transparent);
    --tagify-dd-color-primary: var(--app-primary);
    --tagify-dd-bg-color:      #fff;
    --tagify-dd-max-height:    220px;
    width: 100%;
    min-height: 40px;
    border-radius: var(--app-border-radius, 6px);
    border-color: var(--app-border);
    background: var(--app-form-element-background-color, #fff);
    font-family: var(--app-font-family);
    font-size: var(--text-sm);
  }
  .tagify:hover  { border-color: var(--tags-hover-border-color); }
  .tagify:focus-within { border-color: var(--tags-focus-border-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 15%, transparent); }

  .tagify__tag > div { border-radius: 4px; }
  .tagify__tag__removeBtn { color: var(--app-muted-color); }

  .tagify__dropdown { border-color: var(--app-border); border-radius: var(--app-border-radius, 6px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
  .tagify__dropdown__item { font-size: var(--text-sm); color: var(--app-color); }
  .tagify__dropdown__item--active { background: color-mix(in srgb, var(--app-primary) 12%, transparent); color: var(--app-color); }
}