/*
 * WORKHOUR
 * Fil: ata.css
 * Version: 1.6.2
 * Senast ändrad: 2026-10-01
 * Beskrivning: ÄTA enligt Projekt-standard: sök/filter, bildkort, hero, flikar och media.
 * 1.6.1: Komplett dark mode för ÄTA-översikt, detaljvy, filter och editor.
 */
/* ÄTA-specific additions; existing Workhour card/dialog styles are preserved. */
#ataDialog .ata-upload-section {display:grid;gap:10px;margin:12px 0 4px}
#ataDialog .ata-upload-section>span {font-size:13px;font-weight:700}
#ataDialog .ata-existing-files {display:grid;gap:7px}
#ataDialog .ata-existing-file {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid #dce3ec;border-radius:12px}
#ataDialog .ata-existing-file a {min-width:0;overflow-wrap:anywhere;color:inherit;text-decoration:underline}
#ataDialog .ata-remove-file {flex:none;border:0;background:transparent;color:#b54b3c;font-size:22px;cursor:pointer}
#ataDialog .js-ata-save.is-saving {opacity:.7;pointer-events:none}
.ata-list .ata-card .ata-card-head .icon-btn {cursor:pointer}

/* ÄTA: same paperclip composer as messages; saved attachments use the shared media preview. */
#ataDialog .wh-upload[data-upload-kind="ata"] .wh-upload-composer {align-items:center;flex-wrap:wrap}
#ataDialog .wh-upload[data-upload-kind="ata"] .wh-upload-composer-actions {gap:7px}
#ataDialog .wh-upload[data-upload-kind="ata"] .wh-upload-toggle,
#ataDialog .wh-upload[data-upload-kind="ata"] .wh-upload-action {width:42px;min-width:42px;height:42px;border-radius:12px}
#ataDialog .ata-existing-files:empty {display:none}
#ataDialog .ata-existing-files {display:flex;flex-wrap:wrap;gap:9px}
#ataDialog .ata-existing-file {position:relative;display:flex;align-items:center;gap:7px;width:min(100%,250px);padding:6px;border:1px solid #dce3ec;border-radius:12px;background:#fff}
#ataDialog .ata-file-preview {display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
#ataDialog .ata-file-thumb {display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:8px;background:#f3f3f8;color:#7154bb;font-size:23px;overflow:hidden}
#ataDialog .ata-file-thumb img {width:100%;height:100%;object-fit:cover}
#ataDialog .ata-file-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
#ataDialog .ata-file-download,#ataDialog .ata-remove-file {display:grid;place-items:center;flex:0 0 25px;width:25px;height:28px;border:0;border-radius:7px;background:transparent;color:#596477;text-decoration:none;cursor:pointer;font-size:12px}
#ataDialog .ata-remove-file {color:#b54b3c;font-size:13px}
#ataDialog .ata-file-preview:hover .ata-file-name {text-decoration:underline}
#ataDialog .ata-file-download:hover,#ataDialog .ata-remove-file:hover {background:#f2f3f7}
#ataDialog .wh-upload[data-upload-kind="ata"] .wh-upload-list:not(:empty) {max-width:min(420px,85vw)}

/* Saved attachment names are preview buttons, not download links. */
#ataDialog .ata-existing-file .ata-file-preview {
  appearance:none;-webkit-appearance:none;text-decoration:none;
  color:inherit;font:inherit;cursor:zoom-in;
}
#ataDialog .ata-existing-file .ata-file-preview .ata-file-name {
  text-decoration:none;overflow-wrap:anywhere;
}
#ataDialog .ata-existing-file .ata-file-preview:hover .ata-file-name {text-decoration:underline}
#ataDialog .ata-existing-file .ata-file-download {cursor:pointer}


/* ÄTA använder samma visuella struktur och mått som Projekt, men behåller ÄTA-specifik data. */
.wh-ata-toolbar{display:flex;gap:12px;align-items:stretch;margin:18px 0 22px}
.wh-ata-search{display:flex;align-items:center;gap:12px;flex:1;height:50px;border:1px solid #d7dde5;border-radius:14px;background:#fff;padding:0 15px;box-sizing:border-box}
.wh-ata-search:focus-within{border-color:#bd6251;box-shadow:0 0 0 2px rgba(189,98,81,.12)}
.wh-ata-search input{width:100%;height:48px;min-width:0;border:0!important;outline:0;box-shadow:none!important;background:transparent!important;font:inherit}
.wh-ata-toolbar>.select2-container{flex:0 0 108px!important;width:108px!important;max-width:108px}
.wh-ata-toolbar .select2-selection--single{height:50px!important;border:1px solid #d7dde5!important;border-radius:12px!important;background:#fff!important;display:flex!important;align-items:center}
.wh-ata-toolbar .select2-selection__rendered{line-height:48px!important;padding-left:13px!important;padding-right:26px!important}
.wh-ata-toolbar .select2-selection__arrow{height:48px!important;right:7px!important}

.ata-list{display:grid;gap:13px}
.ata-overview-row{display:flex;width:100%;align-items:center;gap:15px;min-height:105px;padding:11px 15px;border:1px solid #e9eaec;border-radius:17px;background:#fff;color:inherit;text-align:left;cursor:pointer;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease}
.ata-overview-row:hover{border-color:#bfc8d0;box-shadow:0 3px 12px rgba(0,0,0,.045)}
.ata-overview-row:focus-visible{outline:2px solid #bc5f4e;outline-offset:3px}
.wh-ata-card-image{position:relative;width:86px;height:86px;flex:0 0 86px;border-radius:13px;overflow:hidden;background:#f1f2f3}
.wh-ata-card-image img{width:100%;height:100%;object-fit:cover}
.wh-ata-fallback,.wh-ata-detail-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;background:linear-gradient(145deg,#eceff1,#dfe4e8);color:#909ba5;font-size:28px}
.ata-overview-main{display:grid;gap:7px;min-width:0;flex:1}
.ata-overview-main>strong{font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ata-overview-main>small{color:#67717d;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-ata-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;color:#59616a;font-size:12px}
.wh-ata-card-meta .status-pill{font-size:11px}
.wh-ata-open{flex:0 0 24px;color:#8b949d;font-size:17px;text-align:center}

.ata-detail{max-width:850px;margin:0 auto}
.wh-ata-detail-hero{height:clamp(200px,34vh,360px);position:relative;overflow:hidden;border-radius:18px;background:#edf0f3}
.wh-ata-detail-hero>img{width:100%;height:100%;object-fit:cover}
.wh-ata-back{position:absolute;top:16px;left:16px;display:grid;place-items:center;width:39px;height:39px;border:0;border-radius:50%;background:#fff;color:#111;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.wh-ata-detail-body{padding:23px 6px 28px}
.wh-ata-detail-title-row{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}
.wh-ata-detail-title-row small{color:#67717d}
.wh-ata-detail-title-row h2{font-size:27px;margin:3px 0 0;line-height:1.15}
.wh-ata-detail-title-row>.status-pill{flex:none;margin-top:5px}
.wh-ata-facts{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.wh-ata-facts span{padding:9px 13px;border-radius:12px;background:#f3f5f6}
.wh-ata-tabs{display:flex;gap:8px;border-bottom:1px solid #e5e7eb;overflow-x:auto}
.wh-ata-tabs button{white-space:nowrap;border:0;border-bottom:2px solid transparent;background:transparent;padding:15px 12px;color:#68727d;font:inherit;cursor:pointer}
.wh-ata-tabs button.active{border-bottom-color:#151515;color:#111;font-weight:650}
.wh-ata-tab-content{padding:20px 4px;min-height:150px}
.wh-ata-description{line-height:1.65}
.wh-ata-description>:first-child{margin-top:0}
.wh-ata-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:14px}
.wh-ata-gallery-item{min-width:0;display:grid;gap:8px;align-content:start;border:1px solid #e9eaec;border-radius:12px;padding:8px;background:#fff;color:inherit;text-align:left;cursor:pointer}
.wh-ata-gallery-item img,.wh-ata-media-icon{width:100%;aspect-ratio:1.15;object-fit:cover;border-radius:7px}
.wh-ata-media-icon{display:grid;place-items:center;background:#f3f4f6;font-size:32px;color:#67717d}
.wh-ata-gallery-item>span:last-child{overflow-wrap:anywhere;font-size:12px}
.wh-ata-info{display:grid;grid-template-columns:140px 1fr;gap:14px;margin:0}
.wh-ata-info dt{color:#67717d}.wh-ata-info dd{margin:0;font-weight:600}
.wh-ata-empty-tab{color:#67717d}
.ata-detail-actions{display:flex;justify-content:flex-end;margin-top:18px}

#ataDialog .field-group>span,#ataDialog label>span:first-child{display:flex;align-items:center;gap:6px}
#ataDialog .field-info{position:static;flex:none}
#ataDialog .select2-container{width:100%!important}

@media(max-width:650px){
 .wh-ata-toolbar{gap:7px}
 .wh-ata-toolbar>.select2-container{flex-basis:105px!important;width:105px!important;max-width:105px}
 .ata-overview-row{gap:10px;padding:10px}
 .wh-ata-card-image{width:73px;height:73px;flex-basis:73px}
 .ata-overview-main>strong{font-size:15px}
 .wh-ata-card-meta{font-size:11px}
 .wh-ata-detail-hero{border-radius:0 0 14px 14px}
 .wh-ata-detail-body{padding:21px 4px 28px}
 .wh-ata-detail-title-row h2{font-size:25px}
 .wh-ata-tabs button{padding:15px 9px;font-size:13px}
 .wh-ata-info{grid-template-columns:115px 1fr}
 .ata-detail-actions .save-btn{width:100%}
}


/* 1.6.1 – ÄTA dark mode. Följer Workhours globala html.dark-läge utan att ändra light mode. */
html.dark .app-view[data-view="ata"] .wh-ata-search,
html.dark .app-view[data-view="ata"] .wh-ata-toolbar .select2-selection--single,
html.dark .app-view[data-view="ata"] .ata-overview-row{
  background:#171d1b!important;border-color:#2b3532!important;color:#f4f7f6!important;
}
html.dark .app-view[data-view="ata"] .wh-ata-search input{color:#f4f7f6!important}
html.dark .app-view[data-view="ata"] .wh-ata-search input::placeholder{color:#7f8a86!important}
html.dark .app-view[data-view="ata"] .wh-ata-toolbar .select2-selection__rendered{color:#e7ecea!important}
html.dark .app-view[data-view="ata"] .wh-ata-toolbar .select2-selection__arrow b{border-top-color:#a8b2ae!important}
html.dark .app-view[data-view="ata"] .ata-overview-row:hover{border-color:#46534f;box-shadow:0 3px 12px rgba(0,0,0,.18)}
html.dark .app-view[data-view="ata"] .ata-overview-main>small,
html.dark .app-view[data-view="ata"] .wh-ata-card-meta{color:#aab4b0}
html.dark .app-view[data-view="ata"] .wh-ata-open{color:#9da8a4}
html.dark .app-view[data-view="ata"] .wh-ata-card-image{background:#222a27}
html.dark .app-view[data-view="ata"] .wh-ata-fallback,
html.dark .app-view[data-view="ata"] .wh-ata-detail-fallback{background:linear-gradient(145deg,#222a27,#18201d);color:#7f8b87}

html.dark .app-view[data-view="ata"] .wh-ata-detail-title-row h2,
html.dark .app-view[data-view="ata"] .wh-ata-description,
html.dark .app-view[data-view="ata"] .wh-ata-info dd{color:#f3f6f5}
html.dark .app-view[data-view="ata"] .wh-ata-detail-title-row small,
html.dark .app-view[data-view="ata"] .wh-ata-info dt,
html.dark .app-view[data-view="ata"] .wh-ata-empty-tab{color:#9da8a4}
html.dark .app-view[data-view="ata"] .wh-ata-facts span{background:#1b2320;color:#e7ecea}
html.dark .app-view[data-view="ata"] .wh-ata-tabs{border-bottom-color:#39433f}
html.dark .app-view[data-view="ata"] .wh-ata-tabs button{color:#8f9a96}
html.dark .app-view[data-view="ata"] .wh-ata-tabs button.active{border-bottom-color:#f0f4f2;color:#f0f4f2}
html.dark .app-view[data-view="ata"] .wh-ata-gallery-item{background:#171d1b;border-color:#303a36;color:#eef2f0}
html.dark .app-view[data-view="ata"] .wh-ata-media-icon{background:#222a27;color:#a8b2ae}
html.dark .app-view[data-view="ata"] .wh-ata-detail-hero{background:#1d2522}
html.dark .app-view[data-view="ata"] .wh-ata-back{background:#202825;color:#f4f7f6;box-shadow:0 2px 8px rgba(0,0,0,.35)}

html.dark #ataDialog .ata-existing-file{background:#171d1b;border-color:#303a36;color:#eef2f0}
html.dark #ataDialog .ata-file-thumb{background:#222a27;color:#a994e2}
html.dark #ataDialog .ata-file-download{color:#aeb8b4}
html.dark #ataDialog .ata-file-download:hover,
html.dark #ataDialog .ata-remove-file:hover{background:#252e2b}

/* Desktopstandard: ÄTA-översikten använder samma 900 px arbetsyta som startsidan. */
@media (min-width:900px){
  .app-view[data-view="ata"]{max-width:900px;margin-left:auto;margin-right:auto}
}