/**
 * Files — Stylesheet
 */

.fnf-msg { padding: 8px 12px; margin-bottom: 14px; border: 1px solid; font-size: 12px; }
.fnf-msg-ok  { background: #EEFFEE; border-color: #006600; color: #006600; }
.fnf-msg-err { background: #FFEEEE; border-color: #CC0000; color: #CC0000; }

.fnf-share-link-input {
    font-family: monospace;
    font-size: 11px;
    width: 100%;
    max-width: 520px;
    padding: 4px 6px;
    border: 1px solid #7F9DB9;
    background: #F8F8FF;
    color: #003399;
    margin-top: 6px;
    display: block;
}
.fnf-share-inline { max-width: 220px; display: inline-block; width: auto; margin-top: 0; }

/* Storage bar */
.fnf-storage-wrap  { margin-bottom: 14px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
.fnf-storage-label { margin-bottom: 4px; color: #333; }
.fnf-storage-pct   { color: #666; margin-left: 4px; }
.fnf-bar-track     { height: 8px; background: #DDD; border: 1px solid #CCC; }
.fnf-bar-fill      { height: 100%; background: #003399; transition: width .3s; }
.fnf-bar-fill.fnf-bar-warn   { background: #FFCC00; }
.fnf-bar-fill.fnf-bar-danger { background: #CC0000; }

/* Section header */
.fnf-section-header {
    background: #003399;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

/* Upload form */
.fnf-upload-wrap  { margin-bottom: 18px; }
.fnf-upload-form  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fnf-file-input   { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
.fnf-upload-hint  { font-size: 11px; color: #666; font-family: Arial, Helvetica, sans-serif; }

/* Buttons */
.fnf-btn {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
}
.fnf-btn-primary { background: #003399; color: #fff; border-color: #002277; padding: 5px 14px; font-size: 12px; }
.fnf-btn-primary:hover { background: #002277; color: #fff; text-decoration: none; }
.fnf-btn-sm      { background: #EEF2FF; color: #003399; border-color: #7F9DB9; }
.fnf-btn-sm:hover { background: #D0D8F0; text-decoration: none; }
.fnf-btn-warn    { background: #FFF3CD; color: #856404; border-color: #FFCC00; }
.fnf-btn-warn:hover { background: #FFE69C; }
.fnf-btn-danger  { background: #FFEEEE; color: #CC0000; border-color: #CC0000; }
.fnf-btn-danger:hover { background: #FFCCCC; }

/* File table */
.fnf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 20px;
}
.fnf-table th {
    background: #EEF2FF;
    border: 1px solid #7F9DB9;
    padding: 5px 8px;
    text-align: left;
    font-size: 11px;
    color: #003399;
}
.fnf-table td {
    border: 1px solid #C8D8E8;
    padding: 6px 8px;
    vertical-align: middle;
}
.fnf-table tbody tr:nth-child(even) { background: #F8F8FF; }
.fnf-table tbody tr:hover { background: #EEF2FF; }
.fnf-td-name { font-weight: bold; color: #000; max-width: 180px; word-break: break-all; }
.fnf-td-mime { color: #666; font-size: 11px; }
.fnf-actions { white-space: nowrap; }
.fnf-inline-form { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; }
.fnf-rename-input { font-size: 11px; padding: 2px 4px; border: 1px solid #AAA; width: 120px; font-family: Arial, Helvetica, sans-serif; }
.fnf-date-input   { font-size: 11px; padding: 2px 4px; border: 1px solid #AAA; font-family: Arial, Helvetica, sans-serif; }
.fnf-no-share  { color: #CCC; }
.fnf-empty     { color: #666; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-style: italic; }

@media (max-width: 768px) {
    .fnf-table, .fnf-table thead, .fnf-table tbody, .fnf-table th, .fnf-table td, .fnf-table tr {
        display: block;
    }
    .fnf-table thead { display: none; }
    .fnf-table td { border-top: none; padding: 4px 8px; }
    .fnf-table tr { border: 1px solid #C8D8E8; margin-bottom: 8px; }
    .fnf-actions { display: flex; flex-wrap: wrap; gap: 4px; }
}