/**
 * docks | WP-Upload – Frontend-Styles
 * Version: 1.0.0
 *
 * Design-Ziele:
 *  - Sauber, serifenlos, zugänglich
 *  - Funktioniert in hellen und dunklen Themes
 *  - Responsive ab 360px Breite
 */

/* ──────────────────────────────────────────────
   CSS-Variablen (leicht überschreibbar per Theme)
   ────────────────────────────────────────────── */
:root {
	--docks-color-primary:    #2271b1;
	--docks-color-primary-hover: #135e96;
	--docks-color-bg:         #ffffff;
	--docks-color-bg-alt:     #f6f7f7;
	--docks-color-border:     #dcdcde;
	--docks-color-text:       #1d2327;
	--docks-color-text-muted: #646970;
	--docks-color-success:    #00a32a;
	--docks-color-error:      #d63638;
	--docks-color-info:       #72aee6;

	/* Icon-Farben */
	--docks-color-pdf:        #cc0000;
	--docks-color-docx:       #2b579a;
	--docks-color-xlsx:       #217346;
	--docks-color-img:        #f4a100;
	--docks-color-generic:    #646970;

	--docks-radius:           6px;
	--docks-shadow:           0 1px 4px rgba(0, 0, 0, .1);
	--docks-font:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ──────────────────────────────────────────────
   Basis-Wrapper
   ────────────────────────────────────────────── */
.docks-wrapper {
	font-family:  var(--docks-font);
	font-size:    14px;
	color:        var(--docks-color-text);
	margin:       1.5rem 0;
}

/* ──────────────────────────────────────────────
   Leer-Zustand
   ────────────────────────────────────────────── */
.docks-empty {
	padding:       2rem;
	text-align:    center;
	color:         var(--docks-color-text-muted);
	border:        2px dashed var(--docks-color-border);
	border-radius: var(--docks-radius);
}

/* ──────────────────────────────────────────────
   LISTE
   ────────────────────────────────────────────── */
.docks-list {
	width:           100%;
	border-collapse: collapse;
	border:          1px solid var(--docks-color-border);
	border-radius:   var(--docks-radius);
	overflow:        hidden;
	background:      var(--docks-color-bg);
	box-shadow:      var(--docks-shadow);
}

.docks-list thead tr {
	background: var(--docks-color-bg-alt);
}

.docks-list th,
.docks-list td {
	padding:     10px 14px;
	text-align:  left;
	border-bottom: 1px solid var(--docks-color-border);
	vertical-align: middle;
}

.docks-list th {
	font-weight: 600;
	font-size:   12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color:       var(--docks-color-text-muted);
}

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

.docks-list tbody tr:hover {
	background: var(--docks-color-bg-alt);
}

.docks-col-icon {
	width:   36px;
	padding: 8px 8px 8px 14px;
}

.docks-col-size,
.docks-col-date {
	white-space: nowrap;
	color:       var(--docks-color-text-muted);
	font-size:   13px;
}

.docks-col-action {
	width: 110px;
	text-align: right;
}

/* ──────────────────────────────────────────────
   KACHELN (CARDS)
   ────────────────────────────────────────────── */
.docks-cards {
	list-style:      none;
	margin:          0;
	padding:         0;
	display:         grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:             16px;
}

.docks-card {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	gap:             10px;
	padding:         20px 16px 16px;
	background:      var(--docks-color-bg);
	border:          1px solid var(--docks-color-border);
	border-radius:   var(--docks-radius);
	box-shadow:      var(--docks-shadow);
	transition:      box-shadow .15s ease, transform .15s ease;
}

.docks-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	transform:  translateY(-2px);
}

.docks-card__icon {
	width:  52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.docks-card__body {
	display:       flex;
	flex-direction: column;
	gap:           4px;
	flex:          1;
}

.docks-card__name {
	font-weight:   600;
	font-size:     13px;
	word-break:    break-all;
	display:       -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:      hidden;
}

.docks-card__meta {
	font-size:  12px;
	color:      var(--docks-color-text-muted);
}

/* ──────────────────────────────────────────────
   ICONS (SVG)
   ────────────────────────────────────────────── */
.docks-icon {
	width:  28px;
	height: 28px;
	fill:   var(--docks-color-generic);
}

.docks-icon--pdf   { fill: var(--docks-color-pdf);   }
.docks-icon--docx  { fill: var(--docks-color-docx);  }
.docks-icon--xlsx  { fill: var(--docks-color-xlsx);  }
.docks-icon--img   { fill: var(--docks-color-img);   }

/* ──────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────── */
.docks-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         6px 14px;
	font-family:     var(--docks-font);
	font-size:       13px;
	font-weight:     500;
	border-radius:   var(--docks-radius);
	border:          none;
	cursor:          pointer;
	text-decoration: none;
	transition:      background .15s ease, color .15s ease;
	white-space:     nowrap;
}

.docks-btn-download {
	background: var(--docks-color-primary);
	color:      #ffffff;
}

.docks-btn-download:hover {
	background: var(--docks-color-primary-hover);
	color:      #ffffff;
}

.docks-btn--primary {
	background: var(--docks-color-primary);
	color:      #ffffff;
	font-size:  14px;
	padding:    10px 20px;
}

.docks-btn--primary:hover:not(:disabled) {
	background: var(--docks-color-primary-hover);
}

.docks-btn--primary:disabled {
	opacity: .5;
	cursor:  not-allowed;
}

/* ──────────────────────────────────────────────
   UPLOAD-FORMULAR
   ────────────────────────────────────────────── */
.docks-upload-form {
	max-width:     540px;
	border:        1px solid var(--docks-color-border);
	border-radius: var(--docks-radius);
	overflow:      hidden;
	box-shadow:    var(--docks-shadow);
	font-family:   var(--docks-font);
}

.docks-upload-form__header {
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        14px 20px;
	background:     var(--docks-color-bg-alt);
	border-bottom:  1px solid var(--docks-color-border);
}

.docks-upload-form__title {
	margin:      0;
	font-size:   16px;
	font-weight: 600;
}

.docks-upload-form__body {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	padding:        20px;
	background:     var(--docks-color-bg);
}

/* Felder */
.docks-field {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.docks-field__label {
	font-size:   13px;
	font-weight: 500;
}

.docks-field__input {
	padding:       8px 10px;
	border:        1px solid var(--docks-color-border);
	border-radius: var(--docks-radius);
	font-size:     14px;
	background:    var(--docks-color-bg);
	color:         var(--docks-color-text);
}

/* Drop-Zone */
.docks-dropzone {
	position:       relative;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap:            10px;
	padding:        32px 24px;
	border:         2px dashed var(--docks-color-border);
	border-radius:  var(--docks-radius);
	text-align:     center;
	cursor:         pointer;
	transition:     border-color .15s ease, background .15s ease;
}

.docks-dropzone:hover,
.docks-dropzone.is-over {
	border-color: var(--docks-color-primary);
	background:   rgba(34, 113, 177, .04);
}

.docks-dropzone__icon {
	width:  40px;
	height: 40px;
	fill:   var(--docks-color-text-muted);
}

.docks-dropzone__text {
	margin:    0;
	font-size: 14px;
	color:     var(--docks-color-text-muted);
	line-height: 1.5;
}

.docks-dropzone__input {
	position: absolute;
	inset:    0;
	opacity:  0;
	cursor:   pointer;
	width:    100%;
	height:   100%;
}

/* Ausgewählte Datei */
.docks-selected-file {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	gap:            10px;
	padding:        10px 14px;
	background:     var(--docks-color-bg-alt);
	border:         1px solid var(--docks-color-border);
	border-radius:  var(--docks-radius);
	font-size:      13px;
}

.docks-selected-file__name {
	overflow:       hidden;
	text-overflow:  ellipsis;
	white-space:    nowrap;
	font-weight:    500;
}

.docks-selected-file__remove {
	flex-shrink:    0;
	background:     none;
	border:         none;
	font-size:      18px;
	cursor:         pointer;
	color:          var(--docks-color-text-muted);
	padding:        0 4px;
}

/* Progress */
.docks-progress {
	height:         8px;
	background:     var(--docks-color-border);
	border-radius:  100px;
	overflow:       hidden;
}

.docks-progress__bar {
	height:     100%;
	width:      0%;
	background: var(--docks-color-primary);
	transition: width .2s ease;
}

/* ──────────────────────────────────────────────
   NOTICES
   ────────────────────────────────────────────── */
.docks-notice {
	padding:       10px 14px;
	border-radius: var(--docks-radius);
	font-size:     13px;
	line-height:   1.5;
	border:        1px solid transparent;
}

.docks-notice--info {
	background: #f0f6fc;
	border-color: var(--docks-color-info);
	color:        #135e96;
}

.docks-notice--success {
	background:   #edfaef;
	border-color: var(--docks-color-success);
	color:        #145523;
}

.docks-notice--error {
	background:   #fcf0f1;
	border-color: var(--docks-color-error);
	color:        #8a1f22;
}

/* ──────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* Tabelle: Card-Layout auf Mobile */
	.docks-list thead {
		display: none;
	}

	.docks-list tbody tr {
		display:       block;
		border-bottom: 2px solid var(--docks-color-border);
		padding:       10px 0;
	}

	.docks-list td {
		display:       flex;
		align-items:   center;
		gap:           8px;
		border-bottom: none;
		padding:       6px 14px;
	}

	.docks-list td::before {
		content:       attr(data-label);
		font-weight:   600;
		min-width:     90px;
		font-size:     12px;
		color:         var(--docks-color-text-muted);
	}

	.docks-col-icon::before {
		display: none;
	}

	.docks-col-action {
		width:      auto;
		text-align: left;
	}
}