@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@300..800&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Colour palette ── */
:root {
    /* Avid palette */
    --avid-black:        #212121;
    --avid-main:         rgba(66, 66, 66, 0.85);
    --avid-dark-grey:    #303030;
    --avid-medium-grey:  #767676;
    --avid-light-grey:   #96a5b1;
    --avid-white:        #eeeeee;
    --avid-purple:       #7629DF;
    --avid-green:        #7ED321;

    /* Backgrounds */
    --colour-bg-main:        var(--avid-main);
    --colour-bg-panel:       var(--avid-dark-grey);
    
    --colour-bg-input:       var(--avid-black);
    --colour-bg-markdown:    var(--avid-black);
    --colour-bg-modal:       var(--avid-dark-grey);

    --colour-bg-card:        var(--avid-dark-grey);
    --colour-bg-card-hover:  #2D2E38;
    --colour-bg-card-drag-over:  #3A3B46;

    --colour-bg-overlay-dim: #090A0E80;   /*  50%  */
    --colour-bg-overlay-fill:#43444D80;   /*  50%  */

    /* Text */
    --colour-text-title:     var(--avid-white);
    --colour-text-body:      var(--avid-white);
    --colour-text-secondary: var(--avid-white);
    --colour-text-muted:     var(--avid-light-grey);
    --colour-text-label:     var(--avid-white);
    --colour-text-white:     var(--avid-white);
    --colour-text-heading:   var(--avid-white);

    /* Dividers & borders */
    --colour-border:         var(--avid-medium-grey);
    --colour-border-light:   var(--avid-medium-grey);

    /* Ghost button (outline) */
    --colour-btn-ghost-text:         var(--avid-light-grey);
    --colour-btn-ghost-border-hover: var(--avid-light-grey);

    /* Accent (primary / purple) */
    --colour-accent:           var(--avid-purple);
    --colour-accent-hover:     #9c66e2;
    --colour-accent-shadow:    #7629DF40;  /*  25%  */
    --colour-accent-focus:     var(--avid-purple);
    --colour-accent-focus-ring:#9B66EB;

    /* File upload highlight (green) */
    --colour-upload-highlight: var(--avid-green);

    /* Links (green, blue on hover) */
    --colour-link:             var(--avid-green);
    --colour-link-hover:       var(--colour-accent-hover);

    /* Link badge / chip */
    --colour-link-badge-bg:        #7ED3211F;  /*   7%  */
    --colour-link-badge-border:    #7ED32140;  /*  25%  */
    --colour-link-badge-text:      var(--avid-green);
    --colour-link-badge-text-hover:#93C5FD;

    /* Card / drag accents */
    --colour-card-hover-border:  #7629DF80;    /*  50%  */
    --colour-drag-over-bg:       #7629DF26;    /*  15%  */
    --colour-drag-over-shadow:   #7629DF4D;    /*  30%  */
    --colour-drag-row-bg:        #7629DF1A;    /*  10%  */

    /* Collection cards */
    --colour-collection-bg:         rgb(90, 90, 90);
    --colour-collection-bg-hover:   rgb(82, 82, 82);
    --colour-collection-shadow:     rgba(124, 58, 237, 0.5);

    /* Success (green) */
    --colour-success:             var(--avid-green);
    --colour-success-btn:         var(--avid-green);
    --colour-success-btn-hover:   #8DDF3A;
    --colour-success-bg:          #7ED3211A;    /*  10%  */
    --colour-success-border:      #7ED32133;    /*  20%  */
    --colour-success-border-strong: #7ED3214D;  /*  30%  */

    /* Danger (red) */
    --colour-danger:               #ff5353;
    --colour-danger-hover:         #fca5a5;
    --colour-danger-btn-bg:        #dc262633;    /*  20%  */
    --colour-danger-btn-bg-hover:  #dc26264d;    /*  30%  */
    --colour-danger-btn-border:    #ef44444d;    /*  30%  */
    --colour-danger-alert-bg:      #ef44441a;    /*  10%  */
    --colour-danger-alert-border:  #ef444433;    /*  20%  */

    /* Secondary accent (image-edit tabs, crop, range sliders) */
    --colour-amber:               var(--avid-green);
    --colour-amber-light:         #B8EC78;
    --colour-amber-bg:            #7ED3211A;    /*  10%  */
    --colour-amber-selection-bg:  #7ED32126;    /*  15%  */

    /* White variants (layers on dark bg) */
    --colour-white-5:   #F2F4F30D;
    --colour-white-8:   #F2F4F314;
    --colour-white-10:  #F2F4F31A;
    --colour-white-25:  #F2F4F340;

    /* Black overlays */
    --colour-black-overlay: #000000d9;          /*  85%  */
    --colour-black-shadow:  #0000004d;          /*  30%  */
}

/* Base */

* {
    box-sizing: border-box;
}

body {
    max-width:100%;
    width:100%;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    background-color: var(--avid-black);
    color: var(--colour-text-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--colour-link);
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    color: var(--colour-link-hover);
}

p {
    margin: 0.5em 0;
}

p.note {
    font-size:0.7em; 
    color:var(--colour-text-muted); 
    font-style:italic;
}

hr {
    margin: 0;
    border: none;
    border-top: 0.5px solid var(--colour-border);
}

h1, h2, h3, h4 {
    color: var(--colour-text-heading);
    font-weight: 600;
    margin: 0.3em 0;
}

ul {
    margin: 1em 0;
}
ul > li {
    margin: 0.4em 0;
}

/* Layout chrome (layout/layout.blade.php) */

body > header {
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 1em;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 1em;
    min-width: 0;
}

.header-brand > a {
    flex-shrink: 0;
}

.header-brand-copy {
    min-width: 0;
}

body > header h1,
body > header h3,
body > header p {
    margin: 0.15rem 0;
}

.header-account {
    flex: 1 1 auto;
    min-width: max-content;
    margin-left: auto;
    text-align: right;
    font-size: 0.875rem;
}

.header-account-name {
    margin: 0 0 0.25rem;
    color: #cbd5e1;
}

.header-account-separator {
    margin: 0 0.5rem;
    color: #64748b;
}

.logout-form {
    display: none;
}

.header-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.75rem 0 0.5rem;
    font-size: 0.9375rem;
}

.header-nav a {
    color: var(--colour-text-secondary);
    text-decoration: none;
}

.header-nav a:hover {
    color: var(--colour-text-body);
}

.main {
    max-width:100%;
    /* width:100%; */
    margin: 0 1em;
    background-color: var(--colour-bg-main);
    padding: 1em 1em 2em 1em;
    min-height: calc(100vh - 178px);
    border-radius: 5px;
}

body > footer {
    margin: 0 1em;
    padding: 0.3em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--colour-text-secondary);
    font-size: 0.875rem;
}

.rendered {
    color: var(--colour-text-muted);
    font-size: 0.8em;
}

.logo {
    height: 100px;
    border-radius: 50px;
}

.rotating {
    transition: transform 0.3s ease;
}

.rotating:hover {
    transform: rotate(-2deg);
}

/* Breadcrumbs */

 h3.breadcrumbs {
    margin-top: 0;
    margin-bottom: 0.6em;
    font-size: 14px;
}

.breadcrumbs a {
    font-weight: 400;
}

/* 
.breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 1rem;
    color: var(--colour-border-light);
}

.breadcrumb a {
    color: var(--colour-text-secondary);
}

.breadcrumb a:hover {
    color: var(--colour-text-white);
}

.breadcrumb [aria-current="page"] {
    color: var(--colour-text-title);
    font-weight: 500;
} */

/* tables */

table {
    border-collapse: collapse;
}
thead th,
thead td {
    text-align: left;
    font-weight: bold;
    color: white;
    border-bottom: 1px solid var(--colour-link);
}
th,
td {
    padding: 6px 10px;
    font-size: 1em;
}

/* SVG button height */
.svg-icon {
    height: 1.05em;
    vertical-align: bottom;
}


/* Buttons */

.documents-table td button > svg {
    height: 20px;
    margin-right:0.5em;
}

h2 > svg,
.crop-modal span > svg,
a > svg,
button > svg {
    height: 1em;
    vertical-align: text-bottom;
    margin-bottom: 2px;
}

.btn {
    display: inline-block;
    padding: 0.3em 0.8em;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    /* transition: background-color 0.15s ease; */
}

.btn-primary {
    background: var(--colour-accent);
    color: var(--colour-text-white);
    box-shadow: 0 10px 15px -3px var(--colour-accent-shadow);
}

.btn-primary:hover {
    background: var(--colour-accent-hover);
    color: var(--colour-text-white);
}

.btn-secondary {
    background: transparent;
    padding: 0.2em 0.4em;
    border: 1px solid var(--colour-border);
    color: var(--colour-btn-ghost-text);
}

.btn-secondary:hover {
    background: var(--colour-white-5);
    border-color: var(--colour-btn-ghost-border-hover);
    color: var(--colour-text-title);
}

.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-dropdown summary {
    list-style: none;
    cursor: pointer;
}

.export-dropdown summary::-webkit-details-marker {
    display: none;
}

.export-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: var(--colour-bg-panel);
    border: 1px solid var(--colour-border);
    border-radius: 0.5rem;
    padding: 0.25rem 0;
    z-index: 50;
    min-width: 10rem;
    box-shadow: 0 4px 12px var(--colour-black-shadow);
}

.export-dropdown-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--colour-text-body);
    font-size: 0.875rem;
    text-decoration: none;
}

.export-dropdown-menu a:hover {
    background: var(--colour-border);
    color: var(--colour-text-white);
}

.btn-text {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.trash-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--colour-danger);
}

.trash-btn:hover {
    color: var(--colour-danger-hover);
}

.title-actions .trash-btn {
    font-size: 0.7em;
    margin-bottom: 5px;
}

/* Alerts */

.alert {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.alert p {
    margin: 0;
}

.alert ul {
    margin: 0;
    padding-left: 1.25rem;
}

.alert-success {
    background: var(--colour-success-bg);
    border: 1px solid var(--colour-success-border);
    color: var(--colour-success);
}

.alert-error {
    background: var(--colour-danger-alert-bg);
    border: 1px solid var(--colour-danger-alert-border);
    color: var(--colour-danger);
}

/* Panels & tables */

.panel {
    background: var(--colour-bg-panel);
    border: 1px solid var(--colour-border);
    border-radius: 1rem;
}

.table-panel {
    overflow: hidden;
}

.documents-table {
    /* width: 100%; */
    border-collapse: collapse;
}

td.thumb {
    vertical-align: middle;
    padding: 3px 0 3px 0;
}

td.thumb a {
    display: block;
    line-height: 1;
}

td.thumb img {
    display: block;
    width: 36px;
    height: 40px;
    object-fit: cover;
    /* border-radius: 4px; */
    /* border: 1px solid var(--colour-border); */
    background: var(--colour-bg-panel);
}

td.thumb .doc-thumb-icon {
    display: block;
    width: 36px;
    height: 40px;
    color: var(--colour-text-muted);
}

td.thumb img:hover {
    border-color: var(--colour-link);
}

.documents-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.documents-table tbody tr:hover {
    background: var(--colour-bg-panel);
}

.documents-table tbody tr[draggable="true"] {
    cursor: pointer;
}

.documents-table td.doc-title {
    white-space: normal;
}

.documents-table td.doc-title a {
    display: block;
    width: 100%;
    /* padding: 0.55rem 0; */
}

.documents-table .action-link {
    margin-right: 0.75rem;
}

img.document-title-thumb {
    height: 80px;
    margin-right: 10px;
    border: 0.5px solid #A3B2BF91;
    border-radius: 3px;
}

.text-right {
    text-align: right;
}

.inline {
    display: inline;
}

/* Empty state */

.empty-state {
    padding: 0.8em 2em;
    text-align: center;
    margin: 1em auto;
    width: 100%;
}

.empty-state svg {
    margin: 0 auto;
    height: 3rem;
    width: 3rem;
    color: var(--colour-text-muted);
}

.empty-state h3 {
    margin: 1rem 0 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--colour-text-title);
}

.empty-state p {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--colour-text-secondary);
}

.empty-state .btn {
    margin-top: 1.5rem;
}

/* Two column layout (page show/edit) */

.columns {
    display: grid;
    grid-template-columns: minmax(40%, 60%) minmax(40%, 60%);
    gap: 2rem;
    align-items: start;
}

.columns .left {
    min-width: 0;
}

.columns .right {
    min-width: 0;
}

@media (max-width: 1024px) {
    .columns {
        grid-template-columns: 1fr;
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--colour-text-title);
}

/* Markdown transcription */

.markdown-content {
    background: var(--colour-bg-markdown);
    border-radius: 5px;
    padding: 1em;
    min-height: min(70vh, 40rem);
    color: var(--colour-text-body);
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-weight: 300;
    line-height: 1.35;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
    color: var(--colour-text-heading);
}

.markdown-content p {
    margin: 0.65em 0;
}

.markdown-content table {
    display: block;
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 1em 0;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--colour-border-light);
    padding: 0.5rem;
    text-align: left;
    font-size: 0.9em;
}

.markdown-content th {
    background: var(--colour-border);
    vertical-align: bottom;
}
.markdown-content td {
    vertical-align: top;
}

.markdown-content .placeholder {
    color: var(--colour-text-secondary);
    font-style: italic;
}

.model-note {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--colour-text-muted);
}

/* Page image viewer (panzoom) */

.panzoom-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* height: min(75vh, 50rem); */
    /* max-height: 70vh; */
    overflow: hidden;
    border: 1px solid var(--avid-light-grey);
    /* background-color: ; */
    border-radius: 5px;
    touch-action: none;
}

.panzoom-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: move;
}

.panzoom-controls {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 0.3em;
     background: #090A0E8C;
    padding: 0.3em;
    border-radius: 5px;
    z-index: 5;
}

.panzoom-controls .btn {
    padding: 0.3rem 0.55rem;
    line-height: 1;
}

.panzoom-controls .btn svg {
    height: 1.05em;
    vertical-align: bottom;
}

.page-stack .panzoom-container {
    /* height: clamp(20rem, 45vh, 30rem); */
    height: 100%;
    /* max-height: 50vh; */
}

.image-adjustment {
    padding: 1rem 1.5rem;
    display: flex;
    gap: 1rem;
    border-top: 1px solid var(--colour-border);
    background: var(--colour-bg-modal);
}

.image-adjustment > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.image-adjustment > div label {
    color: var(--colour-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.image-adjustment > div label span {
    color: var(--colour-amber);
    font-weight: 600;
}

.image-adjustment input[type="range"] {
    margin: 0;
    height: 6px;
    border-radius: 3px;
    padding: 0;
    width: 100%;
    accent-color: var(--colour-amber);
}

/* Forms */

.textarea-markdown {
    display: block;
    width: 100%;
    height: 70vh;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--colour-bg-input);
    color: var(--colour-text-white);
    box-shadow: inset 0 0 0 1px var(--colour-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.5rem;
    resize: vertical;
}

.textarea-markdown:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--colour-accent-focus-ring);
}

.form-actions {
    /* margin-top: 0.7em; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Page header with right-aligned actions */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1em;
}

.document-page-header {
    margin-bottom: 1rem;
}

.page-header h2 {
    margin: 0 0 0.2em 0;
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--colour-text-title);
}

.page-header-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.title-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5em;
}

.title-block-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 55px;
}

.title-block-thumb img.document-title-thumb {
    margin-right: 0;
}

.title-block-thumb svg,
.title-block-thumb img.document-title-thumb {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
}

.page-meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--colour-text-muted);
}

.link-add-more {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    color: var(--colour-link);
    cursor: pointer;
}

.link-add-more:hover {
    color: var(--colour-link-hover);
}

.collection-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(516px, 656px);
    grid-template-areas:
        "heading uploads"
        "documents uploads"
        "folders folders";
    align-items: start;
    gap: 0.5em;
}

.collection-heading {
    grid-area: heading;
}

.title-with-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

h2.title-with-actions {
    margin-top: 0;
    margin-bottom: 0.2em;
}

.title-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.title-actions .btn {
    margin: 0;
}

.collection-uploads {
    grid-area: uploads;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, 250px);
    justify-content: flex-end;
    gap: 1rem;
}

.collection-documents {
    grid-area: documents;
    min-width: 0;
}

.collection-folders {
    grid-area: folders;
    min-width: 0;
}

.collection-upload-panel .dropzone {
    width: 100%;
    box-sizing: border-box;
}

.documents-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(516px, 656px);
    grid-template-areas:
        "heading uploads"
        "documents uploads"
        "folders folders";
    align-items: start;
    gap: 0.5em;
}

.documents-heading {
    grid-area: heading;
}

.documents-uploads {
    grid-area: uploads;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, 250px);
    justify-content: flex-end;
    gap: 1rem;
}

.documents-main-list {
    grid-area: documents;
    min-width: 0;
    margin-bottom: 1em;
}

.documents-folders {
    grid-area: folders;
    min-width: 0;
}

.documents-upload-panel .dropzone {
    width: 100%;
    box-sizing: border-box;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.page-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.page-navigation-number {
    font-weight: 400;
    opacity: 0.8;
}

.document-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    /* padding: 0.75rem 0; */
    margin: 1em 0;
    /* border-top: 1px solid var(--colour-border);
    border-bottom: 1px solid var(--colour-border); */
}

.document-action-start,
.document-action-end {
    flex: 1;
}

.document-action-end {
    text-align: right;
}

.transcription-complete {
    color: var(--colour-success);
    font-weight: 600;
}

.view-select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--colour-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.view-select svg {
    height: 1.1em;
}

.view-select select {
    padding: 0.4em 2rem 0.4em 0.65em;
    border: 1px solid var(--colour-border);
    border-radius: 8px;
    background: var(--colour-bg-input);
    color: var(--colour-text-body);
    font: inherit;
    cursor: pointer;
}

@media (max-width: 1400px) {
    .collection-layout,
    .documents-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .collection-uploads,
    .documents-uploads {
        grid-template-columns: 250px;
        justify-content: flex-end;
    }
}

@media (max-width: 1050px) {

    .collection-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "uploads"
            "documents"
            "folders";
    }

    .documents-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "uploads"
            "documents"
            "folders";
    }

    .collection-uploads,
    .documents-uploads {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        justify-content: space-around;
    }

    .page-header {
        flex-wrap: wrap;
    }

    .page-navigation {
        width: 100%;
    }

    .document-action-bar {
        flex-wrap: wrap;
    }

    .document-action-start,
    .document-action-end {
        flex: 1 1 auto;
    }

    .view-select {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 750px) {

    .header-top {
        flex-wrap: wrap;
    }

    .header-brand {
        flex: 1 1 100%;
    }

    .header-account {
        flex: 1 1 100%;
        margin-left: 0;
    }

    body .dropzone {
        min-width: 180px;
    }

    body > header { padding: 0.5em; }
    .header-top { gap: 0.3em; }
    .main { 
        margin: 0; 
        padding: 0.5em; 
        border-radius: 0;
    }
    .page-header {  gap: 0.3em; margin-bottom: 0em; }
    .documents-layout { gap: 0.3em; }

}

@media (max-width: 400px) {
    .collection-uploads,
    .documents-uploads {
        grid-template-columns: 1fr;
    }
}

.page-page-header {
    margin-bottom: 2rem;
}

/* .page-page-header h2 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--colour-text-title);
} */

.page-page-header h2 a {
    color: var(--colour-text-secondary);
}

.page-page-header h2 a:hover {
    color: var(--colour-text-body);
}

.page-page-separator {
    color: var(--colour-border-light);
    margin: 0 0.5rem;
}

.btn-danger-outline {
    background: var(--colour-danger-btn-bg);
    border: 1px solid var(--colour-danger-btn-border);
    color: var(--colour-danger);
}

.btn-danger-outline:hover {
    background: var(--colour-danger-btn-bg-hover);
    color: var(--colour-danger-hover);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Document edit form */

.document-form {
    max-width: 100%;
}

.form-group {
    margin: 0.5em 0;
}

.form-group label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.875rem;
    font-weight: 500;
    /* color: var(--colour-text-secondary); */
    color: #9ca3af;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    background: var(--colour-bg-input);
    border: 1px solid var(--colour-border);
    border-radius: 0.2rem;
    color: white;
    font-family: inherit;
    /* font-size: 0.875rem; */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 
              0 1px 0 rgba(255,255,255,0.03);
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--colour-accent-focus);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15), inset 0 1px 2px rgba(0,0,0,0.3);
}

.form-group textarea {
    resize: vertical;
    min-height: 6rem;
}

input[type="checkbox"] {
  width: initial;
  max-width: initial;
  transform: scale(1.4);
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  margin-left: 3px;
  /* margin-left: 2px; */
}

fieldset {
    border: none;
    padding: 0;
    margin-top: 0.8em;
    /* border-bottom: 0.5px solid #ccc; */
}

legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--colour-text-body);
    margin-bottom: 0.5em;
    /* padding: 0 0.5rem; */
}

fieldset .form-group {
    margin-left: 1em;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    /* margin-top: 2rem; */
}

/* Page image grid (document show) */

.page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .page-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .page-grid { grid-template-columns: repeat(5, 1fr); }
}

.page-card {
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.page-card:hover {
    text-decoration: none;
}

.page-card-wrap {
    position: relative;
    overflow: hidden;
    background: var(--colour-bg-panel);
    border: 1px solid var(--colour-border);
    border-radius: 0.5rem;
    /* transition: border-color 0.15s ease; */
}

.page-card-wrap:hover {
    border-color: var(--colour-card-hover-border);
}

.page-card-wrap[draggable="true"] {
    cursor: grab;
}

.page-card-wrap[draggable="true"]:active {
    cursor: grabbing;
}

.page-card-wrap.is-dragging {
    opacity: 0.45;
}

.page-card-wrap.drag-over .page-card {
    box-shadow: 0 0 0 3px var(--colour-drag-over-shadow);
}

.page-grid.is-saving {
    opacity: 0.7;
    pointer-events: none;
}

.page-card-delete {
    display: flex;
    align-items: center;
}

.page-card-delete .trash-btn {
    display: flex;
    align-items: center;
    padding: 0.25rem;
}

.page-card-delete svg {
    width: 1.1rem;
    height: 1.1rem;
}

.page-card-image {
    position: relative;
    /* aspect-ratio: 3 / 4; */
    background: var(--colour-bg-input);
}

.page-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem 0.35rem;
}

.page-card-label {
    font-size: 0.75rem;
    color: var(--colour-text-secondary);
}

.badge-transcribed {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--colour-success-bg);
    border: 1px solid var(--colour-success-border-strong);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--colour-success);
}

.badge-pending {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--colour-link-badge-bg);
    border: 1px solid var(--colour-link-badge-border);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--colour-text-secondary);
}

/* Page stack (document show - stacked view) */

.page-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.page-stack-item {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 0.5px solid var(--colour-border);
}

.page-stack-item:last-child {
    border-bottom: none;
}

.page-stack-heading {
    display: flex;
    align-items: center;
    justify-content:flex-start;
    gap: 1em;
    margin-bottom: 1rem;
}

.page-stack-heading h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--colour-text-title);
}

/* .page-stack-heading h3 a {
    color: inherit;
    text-decoration: none;
}

.page-stack-heading h3 a:hover {
    text-decoration: underline;
} */

/* .page-stack-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
} */

/* .page-stack .markdown-content {
    min-height: auto;
} */

/* Page list (document show - list view) */

.page-list {
    border: 1px solid var(--colour-border);
    border-radius: 0.5rem;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.page-list table {
    width: auto;
}

.page-list th,
.page-list td {
    vertical-align: middle;
}

.page-list-thumbnail {
    width: 3.5rem;
    padding: 0.5rem 0.75rem;
}

.page-list-thumbnail img {
    display: block;
    width: 2.5rem;
    height: 3.25rem;
    object-fit: contain;
    background: var(--colour-bg-input);
}

.page-list tbody tr {
    border-bottom: 1px solid var(--colour-border);
    background: var(--colour-bg-panel);
}

.page-list tbody tr:last-child {
    border-bottom: none;
}

.page-list tbody tr:hover {
    background: var(--colour-bg-markdown);
}

.page-list-number {
    min-width: 10rem;
    font-weight: 600;
    color: var(--colour-text-title);
}

.page-list-actions {
    white-space: nowrap;
}

.page-list-actions .action-link,
.page-list-actions form {
    margin-right: 0.75rem;
}


/* Utility */

.hidden {
    display: none;
}

/* Form panels & inputs */

.form-panel {
    background: var(--colour-bg-panel);
    border: 1px solid var(--colour-border);
    border-radius: 6px;
    padding: 1em;
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colour-text-label);
}

.form-input {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--colour-bg-input);
    color: var(--colour-text-white);
    box-shadow: inset 0 0 0 1px var(--colour-border);
    font-size: 0.875rem;
}

.form-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--colour-accent-focus-ring);
}

.form-hint {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--colour-text-secondary);
}

.form-actions-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Keep ordinary forms compact by placing labels beside their controls. */
.document-form,
.compact-form {
    max-width: 100%;
}

.document-form .form-group,
.compact-form .form-group {
    margin-bottom: 0.75rem;
}

.document-form .form-group > label,
.compact-form .form-group > .form-label {
    display: inline-block;
    width: 140px;
    margin: 0.6em 4px 0 0;
    text-align: right;
    vertical-align: top;
    font-size: 0.875rem;
    font-weight: 400;
    /* color: var(--colour-text-label); */
}

.document-form .form-group > input,
.document-form .form-group > select,
.document-form .form-group > textarea,
.compact-form .form-group > .form-input {
    display: inline-block;
    box-sizing: border-box;
    width: 400px;
    max-width: calc(100% - 160px);
    padding: 0.6em 0.8em;
    vertical-align: top;
    color: #f3f4f6;
}

.document-form .form-group > textarea {
    min-height: 12em;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.document-form .form-group > select {
    background: var(--colour-bg-input);
    border: 1px solid var(--colour-border);
    border-radius: 0.2rem;
    color: var(--colour-text-body);
    font-family: inherit;
    font-size: 0.875rem;
}

.document-form .form-row {
    display: block;
}

.document-form fieldset .form-group {
    margin-left: 0;
}

.document-form .form-actions,
.compact-form .form-actions-end {
    margin-left: 150px;
}

.compact-form .form-hint {
    margin: 0.35rem 0 0 150px;
}

.compact-form .invalid-feedback {
    margin-left: 150px;
}

.compact-form .checkbox-row > label {
    width: auto;
    margin: 0;
    text-align: left;
    color: var(--colour-text-label);
}

.compact-form .checkbox-row input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.link-cancel {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--colour-text-white);
}

.link-cancel:hover {
    color: var(--colour-text-label);
}

/* Step visibility */

.step {
    margin-bottom: 2rem;
}

.step > * + * {
    margin-top: 2rem;
}

/* Progress bar */

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--colour-text-secondary);
}

.progress-track {
    position: relative;
    width: 100%;
    height: 0.5rem;
    background: var(--colour-border);
    border-radius: 9999px;
    overflow: hidden;
}

.progress-stripes {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        45deg,
         #F2F4F326 25%,
        transparent 25%,
        transparent 50%,
         #F2F4F326 50%,
         #F2F4F326 75%,
        transparent 75%
    );
    background-size: 0.5rem 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.progress-stripes.active {
    opacity: 1;
    animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
    from { background-position: 0 0; }
    to   { background-position: 0.5rem 0; }
}

.progress-fill {
    height: 0.5rem;
    background: var(--colour-accent-focus);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Dropzone */

.dropzone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(400px, 100%);
    min-width: 250px;
    padding: 0.8em;
    margin-bottom: 0.5em;
    border: 2px dashed var(--colour-upload-highlight);
    border-radius: 0.5rem;
    cursor: pointer;
    /* transition: background-color 0.15s ease; */
}

.dropzone:hover,
.dropzone-active,
.dropzone.uploading {
    background: var(--colour-bg-overlay-fill);
    border-color: var(--colour-upload-highlight);
    border-style: solid;
}

.dropzone.uploading {
    margin-bottom: 1em;
}

.dropzone-content {
    text-align: center;
}

.dropzone h3 {
    margin: 0;
    font-size:1.125rem;
    font-weight:500;
    color:#fff;
    text-align: center;
}

.dropzone-hint {
    margin: 0.2em 0;
    font-size: 0.7em;
    color: var(--colour-text-muted);
}

.dropzone-text {
    font-size: 0.875rem;
    color: var(--colour-text);
}

.dropzone-text .dropzone-choose {
    font-weight: 600;
    color: var(--colour-link);
    cursor: pointer;
}

.dropzone-text .dropzone-choose:hover {
    color: var(--colour-link-hover);
}

.dropzone-content svg {
    margin: 0 auto;
    height: 120px;
    max-height: 18vw;
    width: auto;
    color: var(--colour-text-secondary);
}

.upload-progress {
    margin-top: 0.5rem;
}

.upload-progress[hidden] {
    display: none;
}

/* File list (upload items) */

.file-list.hidden {
    display: none;
}

.file-list {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    max-height: 50vh;
    overflow-y: auto;

    font-size: 0.8125rem;
    border: 1px solid var(--colour-border);
    border-radius: 3px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1em 0.5em;
    /* background: var(--colour-bg-overlay-fill); */
    /* border-radius: 0.5rem; */
}

.file-item-info {
    display: flex;
    align-items: center;
    gap: 0.2em;
}

.file-item-icon {
    display: inline-block;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
}

.file-item-queued {
    border: 2px solid var(--colour-text-secondary);
    border-radius: 9999px;
    box-sizing: border-box;
}

.file-item-success {
    color: var(--colour-success);
}

.file-item-info .spinner {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border-width: 2px;
}

.file-item-name {
    font-size: 0.7rem;
    color: var(--colour-text-white);
}

.file-item-status {
    margin-left: 10px;
    font-size: 0.6rem;
    color: var(--colour-text-secondary);
}

.file-item-status.status-uploaded {
    color: var(--colour-success);
}

.file-item-status.status-failed {
    color: var(--colour-danger);
}

/* Collating indicator (shown during initial file walking / queuing) */

.collating-indicator {
    margin-top: 1.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--colour-bg-overlay-fill);
    border: 1px dashed var(--colour-accent-focus-ring);
    border-radius: 0.5rem;
    color: var(--colour-text-secondary);
    font-size: 0.875rem;
}

.collating-indicator[hidden] {
    display: none;
}

.collating-indicator .spinner {
    margin: 0;
    flex-shrink: 0;
}

/* Spinner */

.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    margin-left: -0.5rem;
    vertical-align: middle;
    animation: spin 0.75s linear infinite;
    border: 2px solid var(--colour-white-25);
    border-top-color: var(--colour-text-white);
    border-radius: 9999px;
}

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

/* Success / finish button */

.btn-success {
    background: var(--colour-success-btn);
    color: var(--colour-text-white);
}

.btn-success:hover {
    background: var(--colour-success-btn-hover);
    color: var(--colour-text-white);
}

/* Upload messages (JS-injected) */

.upload-message {
    margin-bottom: 1.5rem;
    padding: 1rem;
    padding-right: 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    position: relative;
}

.upload-message p {
    margin: 0;
}

.upload-message-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    font-size: 0.975rem;
}

.upload-message-close:hover {
    opacity: 1;
}

.upload-message-success {
    background: var(--colour-success-bg);
    border: 1px solid var(--colour-success-border);
    color: var(--colour-success);
}

.upload-message-error {
    background: var(--colour-danger-alert-bg);
    border: 1px solid var(--colour-danger-alert-border);
    color: var(--colour-danger);
}

/* Organisation switcher */

.org-switcher {
    position: relative;
    display: inline-block;
}

.org-switcher-btn {
    background: var(--colour-white-5);
    border: 1px solid var(--colour-white-10);
    color: var(--colour-text-body);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-switcher-btn:hover {
    background: var(--colour-white-10);
}

.org-switcher-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: var(--colour-bg-panel);
    border: 1px solid var(--colour-white-10);
    border-radius: 4px;
    min-width: 200px;
    z-index: 100;
    box-shadow: 0 4px 12px var(--colour-black-shadow);
}

.org-switcher-menu.show {
    display: block;
}

.org-switcher-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--colour-text-body);
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
}

.org-switcher-item:hover {
    background: var(--colour-white-5);
    color: var(--colour-link-hover);
}

.org-switcher-divider {
    border-top: 1px solid var(--colour-white-10);
    margin: 0.25rem 0;
}


/* Doc Collections / Folder UI & Drag-and-Drop */

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5em;
}

.collection-card {
    position: relative;
    cursor: default;
    display: block;
    color: inherit;
    text-decoration: none;
}

/* .collection-card:hover {
     transform: translateY(-2px);
} */

.collection-card-tab.drag-over,
.collection-card.drag-over {
    transform: scale(1.05);
}

.collection-card-tab {
    position: relative;
    width: 75px;
    height: 26px;
    background: var(--colour-collection-bg);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    z-index: 0;
}

.collection-card-tab::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(100% - 4px);
    width: 26px;
    height: 100%;
    background-color: inherit;
    transform-origin: top left;
    transform: skewY(45deg);
    border-top-left-radius: 4px;
}

.collection-card-body {
    background: var(--colour-collection-bg);
    border-radius: 0 8px 8px 8px;
    padding: 0.6em 0.8em;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin-top: -1px;
}

.collection-card:hover .collection-card-tab,
.collection-card.drag-over .collection-card-tab {
    background: var(--colour-collection-bg-hover) !important;
    box-shadow: 0px 1px 6px var(--colour-collection-shadow);
}

.collection-card:hover .collection-card-body,
.collection-card.drag-over .collection-card-body {
    background: var(--colour-collection-bg-hover) !important;
    box-shadow: 0px 4px 6px var(--colour-collection-shadow);
}

.collection-create-folder {
    position: relative;
    max-width: 420px;
}

.collection-create-folder .collection-create-tab {
    background: var(--colour-collection-bg);
}

.collection-create-body {
    background: var(--colour-collection-bg);
    border-top: none;
    border-radius: 0 15px 15px 15px;
    padding: 1.25rem 1.5rem 1.5rem;
    position: relative;
    z-index: 1;
    margin-top: -1px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.collection-card-header {
    margin-bottom: 0.75rem;
}

.collection-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--avid-green);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.collection-card.drag-over .collection-card-title,
.collection-card:hover .collection-card-title {
    color: var(--colour-accent-hover);
}

.collection-card-desc {
    font-size: 0.8125rem;
    color: var(--colour-text-secondary);
    margin: 0.25rem 0 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.collection-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top: 1px solid var(--colour-white-25);
    font-size: 0.8125rem;
    color: var(--colour-text-secondary);
    gap: 0.5rem;
}

.collection-card-counts {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.collection-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--colour-text-secondary);
    white-space: nowrap;
}

.collection-count svg {
    height: 1.1em;
    vertical-align: bottom;
    flex-shrink: 0;
}

.collection-card.is-dragging {
    /* opacity: 0.45; */
}

.collection-card[draggable="true"] {
    cursor: grab;
}

.collection-card[draggable="true"]:active {
    cursor: grabbing;
}

.collection-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: var(--colour-link-badge-bg);
    border: 1px solid var(--colour-link-badge-border);
    color: var(--colour-link-badge-text);
    font-size: 0.75rem;
    font-weight: 500;
}

.collection-badge:hover {
    background: var(--colour-link-badge-border);
    color: var(--colour-link-badge-text-hover);
}

tr.is-dragging {
    opacity: 0.4;
    background: var(--colour-drag-row-bg) !important;
}

.documents-table tr[draggable="true"] {
    cursor: grab;
}

.documents-table tr[draggable="true"]:active {
    cursor: grabbing;
}

.documents-table tr[draggable="true"]:hover img {
    border-color: var(--colour-link);
    box-shadow: 0 0 0 2px var(--colour-link-badge-border);
}

.uncategorized-dropzone {
    background: var(--colour-bg-overlay-dim);
    border: 2px dashed var(--colour-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--colour-text-secondary);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.uncategorized-dropzone.drag-over {
    border-color: var(--colour-amber);
    background: var(--colour-amber-bg);
    color: var(--colour-amber-light);
}

.crop-modal-overlay {
    z-index: 1000;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.crop-modal-overlay::backdrop {
    background: var(--colour-black-overlay);
}

.crop-modal {
    position: relative;
    background: var(--colour-bg-modal);
    border-radius: 1rem;
    width: min(1400px, 96vw);
    max-width: 96vw;
    max-height: 94vh;
    height: min(900px, 90vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.image-edit-busy {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--colour-black-overlay);
    color: var(--colour-text-white);
    font-weight: 600;
}

.image-edit-busy.htmx-request {
    display: flex;
}

.image-edit-busy svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.crop-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--colour-border);
}

.crop-modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--colour-text-body);
}

.crop-modal-close {
    background: none;
    border: none;
    color: var(--colour-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.crop-modal-close:hover {
    color: var(--colour-text-body);
}

.crop-image-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    flex: 0 0 78%;
    height: 78%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.crop-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

.crop-selection {
    position: absolute;
    border: 2px dashed var(--colour-amber);
    background: var(--colour-amber-selection-bg);
    display: none;
    cursor: move;
}

.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
     background: var(--avid-white);
    border: 2px solid var(--colour-amber);
    border-radius: 2px;
    pointer-events: auto;
    z-index: 2;
}
.crop-handle[data-handle="nw"] { top: -6px; left: -6px; cursor: nw-resize; }
.crop-handle[data-handle="n"]  { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
.crop-handle[data-handle="ne"] { top: -6px; right: -6px; cursor: ne-resize; }
.crop-handle[data-handle="e"]  { top: 50%; margin-top: -6px; right: -6px; cursor: e-resize; }
.crop-handle[data-handle="se"] { bottom: -6px; right: -6px; cursor: se-resize; }
.crop-handle[data-handle="s"]  { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
.crop-handle[data-handle="sw"] { bottom: -6px; left: -6px; cursor: sw-resize; }
.crop-handle[data-handle="w"]  { top: 50%; margin-top: -6px; left: -6px; cursor: w-resize; }

.crop-modal-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--colour-border);
    justify-content: space-between;
}

.image-edit-action-group {
    display: flex;
    gap: 0.75rem;
}

.image-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.image-edit-tabs {
    display: flex;
    border-bottom: 1px solid var(--colour-border);
}

.image-edit-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--colour-text-muted);
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s, border-color 0.15s;
    border-bottom: 2px solid transparent;
}

.image-edit-tab:hover {
    color: var(--colour-text-secondary);
}

.image-edit-tab.active {
    color: var(--colour-amber);
    border-bottom-color: var(--colour-amber);
}

.image-edit-panel {
    display: none;
}

.image-edit-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.image-edit-panel > form {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    flex-shrink: 0;
}

.rotate-controls {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--colour-border);
    background: var(--colour-bg-modal);
}

.rotate-presets {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rotate-fine {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rotate-fine label {
    color: var(--colour-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.rotate-fine label span {
    color: var(--colour-amber);
    font-weight: 600;
}

.rotate-fine input[type="range"] {
    margin: 0;
    height: 6px;
    border-radius: 3px;
    padding: 0;
    width: 100%;
    accent-color: var(--colour-amber);
}

.rotate-preview {
    transform-origin: center;
}

.slider-reset {
    display: none;
    cursor: pointer;
    color: var(--colour-text-muted);
    font-size: 0.75rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    transition: color 0.15s;
}

.slider-reset:hover {
    color: var(--colour-text-secondary);
}

@media (max-width: 640px) {
    .crop-modal-overlay {
        padding: 0.5rem;
    }

    .crop-modal {
        width: 100%;
        max-width: 100%;
        max-height: 96vh;
        height: 96vh;
    }

    .crop-image {
        max-width: 100%;
        max-height: 100%;
    }

    .image-adjustment {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .crop-modal-actions,
    .rotate-controls {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.pagination-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.pagination .btn {
    padding: 0.35rem 0.75rem;
}

.pagination-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--colour-text-secondary);
}

/* Compact Activity Log (Top Right Header) */
.page-header-activity {
    min-width: 400px;
    max-width: 550px;
    flex-shrink: 0;
}

.activity-log-wrapper {
    /* background: var(--colour-bg-panel);
    border: 1px solid var(--colour-border);
    border-radius: 0.5rem; */
    overflow: hidden;
    /* box-shadow: 0 4px 12px var(--colour-black-shadow); */
}

.activity-log-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2em 0.8em;
    /* background: var(--colour-white-5); */
}

.activity-log-title {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--colour-text-title);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.activity-icon {
    display: inline-block;
    font-size: 1em;
}

.activity-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

.activity-log-wrapper.is-refreshing .activity-icon {
    animation: iconSpin 2s linear infinite;
}

@keyframes iconSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.activity-table-scroll {
    max-height: 140px;
    overflow-y: auto;
    font-size: 0.8125rem;
    border: 1px solid var(--colour-border);
    border-radius: 3px;
}

.activity-table-scroll::-webkit-scrollbar {
    width: 4px;
}
.activity-table-scroll::-webkit-scrollbar-thumb {
    background: var(--colour-border);
    border-radius: 2px;
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
}

.activity-table th {
    display: none;
}

.activity-table td {
    /* padding: 0.35rem 0.65rem; */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
    vertical-align: middle;
}

.activity-table tr.latest-activity {
    background: rgba(126, 211, 33, 0.10);
}

.activity-msg {
    color: var(--colour-text-body);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.activity-time {
    white-space: nowrap;
    color: var(--colour-text-muted);
    font-size: 0.75rem;
    text-align: right;
}

.activity-user {
    padding: 0 0.35rem;
    white-space: nowrap;
    text-align: right;
}

.activity-log-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.activity-expand-btn {
    background: none;
    border: none;
    color: var(--colour-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.activity-expand-btn:hover {
    background: var(--colour-white-10);
    color: var(--colour-text-title);
}

.activity-log-wrapper.expanded .activity-table-scroll {
    max-height: 520px;
}

/* Transcription Status Boxes (Page Left) */
.transcription-status-box {
    padding: 1.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.transcription-status-box svg {
    flex-shrink: 0;
    margin: 0.2rem 0 0 0;
    width: 1.25rem;
    height: 1.25rem;
}

.transcription-status-box.status-queued {
    background: rgba(147, 197, 253, 0.1);
    border: 1px solid rgba(147, 197, 253, 0.25);
    color: #93c5fd;
}

.transcription-status-box.status-transcribing {
    background: rgba(118, 41, 223, 0.15);
    border: 1px solid rgba(118, 41, 223, 0.35);
    color: #e9d5ff;
}

.transcription-status-box.status-failed {
    background: var(--colour-danger-alert-bg);
    border: 1px solid var(--colour-danger-alert-border);
    color: var(--colour-danger);
    flex-direction: column;
}

.status-time {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    opacity: 0.8;
}

.status-error {
    margin: 0.35rem 0 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--colour-text-white);
}

.btn-retry {
    border-color: var(--colour-danger-btn-border);
    color: var(--colour-danger);
}
.btn-retry:hover {
    background: var(--colour-danger-btn-bg);
    color: var(--colour-text-white);
}

/* Status Chips (List View) */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-chip.chip-running {
    background: rgba(147, 197, 253, 0.15);
    color: #93c5fd;
}
.status-chip.chip-running svg {
    width: 0.85rem;
    height: 0.85rem;
    margin: 0;
    flex-shrink: 0;
}

.status-chip.chip-done {
    background: var(--colour-success-bg);
    color: var(--colour-success);
}